4

我正在寻找在选中复选框时如何禁用表单上的所有其他输入。我现在有一半，但是当我的问题是当我单击复选框时，它会与其他元素一起禁用自身。我只希望其他元素被禁用。

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 {

    }
});
4

1 回答 1

1 
$('#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
});

用于.not()排除选择中的当前元素。而且我建议绑定到，change而不是click在用户决定浏览表单的情况下。

另外，一个jsFiddle（虽然在演示中我引用this.form了input element，但您也可以在我上面的示例中保留它$form。）

于 2013-04-18T14:40:38.517 回答