I'm following a tutorial where you make a checkbox that enables a disabled button and when you uncheck the box, the button bees disabled again. The problem is that when I uncheck the box, it seems like the checkbox still in an "on" state because the button is not disabled. The code works in Chrome but not in Firefox 3.6.

Here is my code:

<p><input type="checkbox" id="agree" >I agree</p>
<input id="continue" type="button" value="continue" disabled='true'>


<script>
        $('#agree').change(function(){
       var state = $(this).attr('value');
        if(state == 'on'){
        $('#continue').removeAttr('disabled');
        }else if(state == ''){
            $('#continue').attr('disabled', 'false');
        }
        });
    </script>

I'm following a tutorial where you make a checkbox that enables a disabled button and when you uncheck the box, the button bees disabled again. The problem is that when I uncheck the box, it seems like the checkbox still in an "on" state because the button is not disabled. The code works in Chrome but not in Firefox 3.6.

Here is my code:

<p><input type="checkbox" id="agree" >I agree</p>
<input id="continue" type="button" value="continue" disabled='true'>


<script>
        $('#agree').change(function(){
       var state = $(this).attr('value');
        if(state == 'on'){
        $('#continue').removeAttr('disabled');
        }else if(state == ''){
            $('#continue').attr('disabled', 'false');
        }
        });
    </script>

• javascript
• jquery
• attributes
• checkbox

• 1 The "disabled" attribute does not take the values "true" or "false". It takes the values "disabled" (alternatively "") or must be removed. – Tomalak Commented Sep 1, 2011 at 5:37
• ...Though if you have a direct reference to the DOM element you can say el.disabled = true; // or false. – nnnnnn Commented Sep 1, 2011 at 5:49

3 Answers 3

a checkbox's check value doesn't change with .val() you should be using .is('checked') like so:

$('#agree').change(function() {
    var state = $(this).is(':checked'); //state = true/false depending on state
    if (state) { //if true
        $('#continue').removeAttr('disabled'); //remove disabled
    } else { //else (false)
        $('#continue').attr('disabled', 'disabled'); //add disabled (you shouldn't set it to 'false' as it WILL be disabled and it'll confuse you.
    }
});

Here's an Example to see my points.

Try :

$(function() {
    $('#agree').click(function() {
        if ($(this).is(':checked')) $('#continue').attr('disabled', false);
        else $('#continue').attr('disabled', true);
    });
});

LINK : http://jsfiddle/Mmm4h/

Try this:

$('#agree').change(function() {
    if($("#agree").is(":checked"))
        $('#continue').removeAttr('disabled');
    else
        $('#continue').attr('disabled', false);
});

http://jsfiddle/TGQZs/1/