根据一个复选框的状态禁用复选框

Question

if 'choose not to answer' is checked, i need to disable the other checkboxes, here is my code and html, any help as to why it's not working?

code

function toggleStatus() {
if ($('#toggleElement').is(':checked')) {
    $('#living :input').attr('disabled', true);
} else {
    $('#living :input').removeAttr('disabled');
}

html

<p>With whom do you live? Choose all that apply<br/>
    <input type="checkbox" name="living" value="alone" id="living">
    Live alone <br>
    <input type="checkbox" name="living" value="husband" id="living">
    Husband <br>
    <input type="checkbox" name="living" value="partner" id="living">
    Partner <br>
    <input type="checkbox" name="living" value="children" id="living">
    Children <br>
    <input type="checkbox" name="living" value="parents" id="living">
    Parents <br>
    <input type="checkbox" name="living" value="other_relatives" id="living">
    Other relatives <br>
    <input type="checkbox" name="living" value="religion" id="living">
    Religious order <br>
    <input type="checkbox" name="living" value="no_answer" 
                id="toggleElement">
    Choose not to answer <br>
</p>

Answer 1

I don't see your function being called anywhere, you can rig it up inside a document.ready handler though, and simplify it too, like this:

$(function() {
  $("#toggleElement").change(function() {
    $('input[name=living]').not(this).attr('disabled', this.checked);
  });
});

Also note that your selector was incorrect, it should be just based on the name...and that ID should be left out, since it's duplicated.

Answer 2

Try this instead:

if ($('#toggleElement').is(':checked')) {
    $('#living :input').attr('disabled', "disabled");
} else {
    $('#living :input').attr('disabled', false);
}