Question

我正在寻找如何在选中复选框时禁用表单上的所有其他输入。我现在已经到了中途，但是当我点击复选框时出现问题时，它会自动禁用其他元素。我只希望其他元素被禁用。

    <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 {

    }
});

Answer 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（虽然在演示中我引用了input element this.form，但您也可以在上面的示例中保留$form。）< / p>

选择表单中的所有其他字段

1 个答案: