Question

I want to toggle disabled/enabled for a form based on a users click of an edit checkbox. Simple stuff.

While the disabling component works, the checkbox’s default checked behavior is overriden. I even tried to return attr(“checked”,true) to get it to work but no dice. I’m assuming that this might have to do with my markup (placing the checkbox in a div). Can’t figure it out.

$(function(){
$('#target :input').attr('disabled','disabled');

$(':checkbox').toggle(
    function(){
        $(this).attr("checked",true);
        $('#target :input').attr('disabled',false);

    },
    function(){
        $('#target:input').attr('disabled','disabled');         
        $(this).attr("checked", false);


});
});

Thanks,
Brendan

Answer 1

As @Devbook.co.uk noted, the toggle-event^[docs] method breaks the default behavior of the checkbox.

One solution is to use the .change() event, along with the this.checked property of the checkbox.

Example: http://jsfiddle.net/Efpr6/

$('#target :input').attr('disabled', 'disabled');

$('#toggler').change(function() {
    $('#target :input').attr('disabled', !this.checked);
});