jquery IF behaves differently if i put a alert

Question

i want to disable all elements of my class where my checkbox is not checked. But even this is checked, my if returns false.

$('.myClass').each(function(i, obj) {
  if (!$j('input[name='+obj.id+']').is(':checked')){  
    $j('#desc_'+obj.id).attr('disabled','disabled');              
  }        
});

But if i put a alert inside the if, its works!

$('.myClass').each(function(i, obj) {
  if (!$j('input[name='+obj.id+']').is(':checked')){  
    alert($j('input[name='+obj.id+']').is(':checked'));
    $j('#desc_'+obj.id).attr('disabled','disabled');              
  }        
});

Anyone knows why?

does this code live in the document ready handler? I bet it is not, and the alert provides a delay in execution. — mkoryak, Sep 10 '13 at 14:53
fyi, to set the disabled property it's much cleaner to use `.prop('disabled', true_or_false)` instead of fiddling around with attributes — ThiefMaster, Sep 10 '13 at 14:55
And it actually works properly when using `.prop()` rather than `.attr()` (.attr() will work initially, but it will then stop working alltogether) — Kevin B, Sep 10 '13 at 14:56
@KevinB attributes should work fine, it's just that `removeAttr` will be equivalent of `.disabled = false` and any value in `attr` will be equivalent to `.disabled = true`. — Esailija, Sep 10 '13 at 15:03
i tried to do `$j('.myClass').each(function(i, obj) { $j('#desc_'+obj.id).prop('disabled', !$j('#'+obj.id).prop('checked')); });` but it not works too — user2765455, Sep 10 '13 at 15:09
@Esailija Yes you are correct, i didn't realize he was using disabled, not checked. Changing the checked attribute is buggy like i described, but not disabled. http://jsfiddle.net/CZKYM/ — Kevin B, Sep 10 '13 at 15:10
@KevinB the checked attribute maps to `.defaultChecked` property, not `.checked` property. The defaultChecked property changes the checked if the input is not dirty. http://stackoverflow.com/a/11779426/995876 — Esailija, Sep 10 '13 at 15:32

score 5 · Accepted Answer · edited May 23 '17 at 11:50

Developers tend to use console.log instead, alert() behaves differently because the DOM wont load in full until AFTER the "OK" button has been clicked on the alert.

Consider using:

$('.myClass').each(function(i, obj) {
      if (!$j('input[name='+obj.id+']').is(':checked')){  
        console.log($j('input[name='+obj.id+']').is(':checked'));
        $j('#desc_'+obj.id).prop('disabled','disabled');              
      }        
    });

For more information and documentation see:

What is console.log and how do I use it?

and

https://developer.mozilla.org/en-US/docs/Web/API/console.log

EDIT:

I would also consider using .prop over .attr, the main differences and reasons for this are highlighted here:

.prop() vs .attr()

There's no point in me re-inventing the wheel!

score 0 · Answer 2 · answered Sep 10 '13 at 15:00

Looks like you were referencing jQuery wrong. Try this :

$('.myClass').each(function(i, obj) {
    if (!$('input[name='+obj.id+']').is(':checked')){  
        $('#desc_'+obj.id).attr('disabled','disabled');              
    }        
});

The difference is ..$j(.. vs ..$(..

score -1 · Answer 3 · answered Sep 10 '13 at 14:55

-1

Ensure that you're code is wrapped in the $(function() { ... }

$(function() {
  $('.myClass').each(function(i, obj) {
    if (!$j('input[name='+obj.id+']').is(':checked')){  
      $j('#desc_'+obj.id).attr('disabled','disabled');              
    }        
  });
});

answered Sep 10 '13 at 14:55

GaryDevenay

2,405
2
19
41

1

It's unlikely that this is the case due to the fact that `$('.myClass')` selects at least 1 element, unless the code is included after the .myClass element and before the checkbox. Possible, but unlikely. – Kevin B Sep 10 '13 at 14:57

jquery IF behaves differently if i put a alert

3 Answers3