Question

I’m following a tutorial where you make a checkbox that enables a disabled button and when you uncheck the box, the button becomes 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>

Answer 1

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.