Select all other fields in a form

Question

I am looking for how I can disable all other inputs on a form when a checkbox is selected. I have it halfway there now, but when my problem is when i click the checkbox, it disables itself along with the other elements. i want only the other elements to become disabled.

http://jsfiddle.net/rockitdev/8TF2a/3/

    <form action="#" method="post">

<div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
</div>

<div>
     <label for="name">Text Input:</label>
     <input type="text" name="name" id="name" value="" tabindex="1" />
</div>

<div>
     <h4>Radio Button Choice</h4>

     <label for="radio-choice-1">Choice 1</label>
     <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

     <label for="radio-choice-2">Choice 2</label>
     <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>

<div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
        <option value="Choice 3">Choice 3</option>
    </select>
</div>

<div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>



<div>
    <input type="submit" value="Submit" />
</div>

$('#checkbox').click(function () {
    var $this = $(this);
    // $this will contain a reference to the checkbox   
    if ($this.is(':checked')) {
        $('input:not(this)').attr("disabled", true);
    } else {

    }
});

I would look here: [http://stackoverflow.com/questions/3419159/how-to-get-all-child-controls-of-a-windows-forms-form-of-a-specific-type-button](http://stackoverflow.com/questions/3419159/how-to-get-all-child-controls-of-a-windows-forms-form-of-a-specific-type-button) — Glimpse, Apr 18 '13 at 14:58

Brad Christie · Accepted Answer · 2013-04-18T14:49:09.770

$('#checkbox').change(function(e){
  var $form = $(this).closest('form'); // locate the form we're referring to
  // alternative method: var $form = $(this.form);      

  $form.find(':input') // grab all input elements (buttons, inputs, select lists, etc.)
    .not(this) // exclude this checkbox
    .attr('disabled', !this.checked); // mark these elements as disabled
                                      // based on the checkbox value
});

Use .not() to exclude the current element in your selection. And I recommend binding to change instead of click in case the user decides to tab through the form.

Also, a jsFiddle (though in the demo I reference this.form off the input element, but you can retain the $form in my example above, too.)

Great +1 for the explanation :) – Dhaval Marthak Apr 18 '13 at 14:43 — Dhaval Marthak, Apr 18 '13 at 14:43

Select all other fields in a form

1 Answers1