Jquery .each not working, bad code or a better method available?
First the setup: jquery 1.5.1 Firefox 4.0
Goal: I've got a bunch of textboxes that are enabled/disabled using checkboxes. If a textbox is enabled, I want it to have a value greater than zero.
HTML for one of the boxes(there are a variable number of them on the page):
<input type="text" value="0" name="RequestList[4].iCount" id="RequestList_4__iCount" class="num-box">
My jQuery using .each that doesn't work:
var oneFill = false;
$('.num-box').each(function() {
var myItem = $(this);
if (myItem.attr('disabled') == false) {
if (myItem.val() > 0) {
oneFill = true;
}
}
});
if (!oneFill) {
When I trace the above code in Firebug, it doesn't do anything. It continues to the next line of code(if(!oneFill)).
When I use $('.num-box') in Firebug, it returns a complete list of all textboxes. So I'm very confident that I've got the right selector.
So the question is, what did I do wrong? I've looked at a host of examples here and it appears my use of .each was correct.
But, is there a more efficient method for checking all enabled textboxes with class of num-box?
Addition1 @artlung Using continuing my sample html above, I would have at least the following:
<input type="text" value="0" name="RequestList[1].iCount" id="RequestList_1__iCount" class="num-box">
<input type="text" value="0" name="RequestList[2].iCount" id="RequestList_2__iCount" class="num-box">
<input type="text" value="0" name="RequestList[3].iCount" id="RequestList_3__iCount" class="num-box">
<input type="text" value="0" name="RequestList[4].iCount" id="RequestList_4__iCount" class="num-box">
The checkboxes would look like:
<input type="checkbox" value="true" name="RDEquipListItem[1]" id="RDEquipListItem_1_">
<input type="checkbox" value="true" name="RDEquipListItem[2]" id="RDEquipListItem_2_">
<input type="checkbox" value="true" name="RDEquipListItem[3]" id="RDEquipListItem_3_">
<input type="checkbox" value="true" name="RDEquipListItem[4]" id="RDEquipListItem_4_">
I've got java script that enables/disables the textboxes when the appropriate checkbox is checked.
So far, I've seen some good adjustments to the meat of my code. I will vote for those tomorrow.
My confusion is whether there is an issue with my .each portion:
$('.num-box').each(function() {
Addition2 I've been playing with some of the results. My current code looks like:
var oneFill = false;
var myEnabled = $('.num-box:enabled');
myEnabled.each(function() {
var myItem = $(this);
if (parseInt(myItem.val()) > 0) {
oneFill = true;
}
});
if (!oneFill) {
myEnabled gets the correct list of elements that are enabled. thumbs up
However, the myEnabled.each does nothing.
Is there an issue with a single item being used by .each?
Final comment Not sure why this was giving me an issue but I had to reorder the logic a bit. Even using Firebug, it wouldn't step into the ".each" code but the results are correct.
Final code(NOTE: .num-box are textboxes that are enabled/disabled by checkboxes):
//make sure one item has been filled in and all are greater than zero
var allFilled = true;
var myEnabled = $('.num-box:enabled');
//check that we have at least one item checked out
if (myEnabled.length == 0) {
alert("At least one needs to be filled.");
return false;
}
$.each(myEnabled, function() {
var myItem = $(this);
if (parseInt(myItem.val()) <= 0) {
allFilled = false;
}
});
if (!allFilled)
{
//go d开发者_如何转开发o something
I think you need to check whether or not the current num-box
is disabled by doing the following...
myItem.is(':disabled')
EDIT
could you accomplish what you want to do without using the .each?
something like... http://jsfiddle.net/fWCxj/2/
HTML
<input type="checkbox" value="true" name="RDEquipListItem[2]" id="RDEquipListItem_2_">
<input type="text" value="0" name="RequestList[2].iCount" id="RequestList_2__iCount" class="num-box" disabled="disabled">
<br />
<input type="checkbox" value="true" name="RDEquipListItem[3]" id="RDEquipListItem_3_">
<input type="text" value="0" name="RequestList[3].iCount" id="RequestList_3__iCount" class="num-box" disabled="disabled">
<br />
<input type="checkbox" value="true" name="RDEquipListItem[4]" id="RDEquipListItem_4_">
<input type="text" value="0" name="RequestList[4].iCount" id="RequestList_4__iCount" class="num-box" disabled="disabled">
<br />
JS
$('input[type=checkbox]').click(function() {
var cb = $(this);
cb.next('input[type=text]').prop('disabled', cb.is(':not(:checked)'));
});
var oneFill = $('.num-box:not(:disabled)').length > 0;
alert(oneFill);
Try this
var oneFill = false;
$('.num-box').each(function() {
var myItem = $(this);
if (myItem.is(":enabled") && parseInt(myItem.val()) > 0) {
oneFill = true;
}
});
if (!oneFill) {
}
.attr()
returns a string, not a boolean character. if you want to check to see if an input is disabled or not, use .is(':disabled')
精彩评论