JQuery to disable checkbox if another is checked

Question

I have one checkbox that shows a div if the user checks it. That div contains 2 other checkboxes. If one of those two checkboxes are checked, I want to disable the first checkbox. Some hmtl:

        <p><input id="noneAboveCheck" type="checkbox" />None of the above</p>
        <div id="noneAbove" class="hidden">
          <p><input id="incarcerated" type="checkbox" /></p>
          <p><input id="support" type="checkbox" />Blah Blah</p>
        </div>

And here my jQuery, the toggle for the div works, but not the disabling. The alert was there for testing and it doesnt show either, so I assume my first line is incorrect:

    $('#noneAboveCheck').change(function () {                
      $('#noneAbove').toggle(this.checked);
    }).change();

    if ($('#incarcerated, #support').attr("checked")) {
      alert("hello");
      $('#noneAboveCheck').attr('disabled', true);
    } else {
      $('#noneAboveCheck').attr('disabled', false);
    }

One last thing, I am (unfortunately) still using jQuery 1.4, so I dont think I can use .prop(). Thanks for all the help.

j08691 · Accepted Answer · 2014-03-31 14:20:39Z

4

You need to wrap the second chunk of code in a change event:

$('#noneAboveCheck').change(function () {
    $('#noneAbove').toggle(this.checked);
}).change();

$('#incarcerated, #support').change(function () {
    if ($(this).attr("checked")) {
        $('#noneAboveCheck').attr('disabled', true);
    } else {
        $('#noneAboveCheck').attr('disabled', false);
    }
});

jsFiddle example

answered Mar 31, 2014 at 14:20

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Naylor Over a year ago

Should if ($(this).attr("checked")) be if ($('#incarcerated').attr("checked") || $('#support').attr("checked"))? Checking both lower checkboxes, then unchecking one will enable the first checkbox again.

Mr Man Over a year ago

@j08691 Thanks for this, I should have known to add the change event. Will mark as accepted asap.

Ogrim Over a year ago

if ($(this).attr("checked")) will only work properly for jquery 1.6+ It's safer to use .prop().

RGS · Accepted Answer · 2014-03-31 14:26:17Z

2

$('#noneAboveCheck').change(function () {
    $('#noneAbove').toggle(this.checked);
}).change();

$('#incarcerated, #support').change(function () {
    if ($(this).is(":checked")) {
        $('#noneAboveCheck').attr('disabled', true);
    } else {
        $('#noneAboveCheck').attr('disabled', false);
    }
});

Demo:

http://jsfiddle.net/vy6ce/

answered Mar 31, 2014 at 14:26

RGS

5,2217 gold badges44 silver badges69 bronze badges

Comments

sonnenhaft · Accepted Answer · 2014-03-31 14:37:46Z

0

var mainHider = $('#noneAboveCheck');
mainHider.click(function(){
    if ($(this).is(':checked')) {
        $('#noneAbove').hide();
    } else {
        $('#noneAbove').show();
    }    
});

$('#incarcerated,#support').click(function(){
    if ($('#incarcerated').is(':checked') || $('#support').is(':checked')) {
        mainHider.attr('disabled','disabled');
    } else {
        mainHider.removeAttr('disabled');
    }

});

fiddle

answered Mar 31, 2014 at 14:37

sonnenhaft

1,6471 gold badge13 silver badges15 bronze badges

Collectives™ on Stack Overflow

JQuery to disable checkbox if another is checked

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related