2

我有多个默认禁用的文本字段，并且在它们上方有一个复选框。我希望当您选中此复选框时，它将启用所有文本字段。

**Checkbox** not checked            **Checkbox** checked
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
etc....

它需要适合这个html结构：

<div class="large-4 columns">
   <label for="checkbox"><input type="checkbox" id="checkbox">co-applicant</label>

   <div class="large-12 columns">
      <input type="text" id="inputbox" required pattern="[a-zA-Z]+" placeholder="First name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="text" id="inputbox" required pattern="[a-zA-Z]+" placeholder="Last name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="email" id="inputbox" required placeholder="Email" disabled="disabled">
   </div>
</div>

我查找了几个示例，但没有一个可以工作。此外，jquery 代码 - 我应该把它放在哪里才能最好地工作？

谢谢您的帮助！

4

5 回答 5

3 
$('#test').click(function() {
    $('input:text').attr('disabled',!(this.checked))
});

演示1

更新Email类型：

如果您使用不同type的 '，请选择input

$('#test').click(function() {
    $('input').attr('disabled',!(this.checked))
});

演示2

于 2013-08-27T14:58:21.897 回答
0

您必须拥有唯一的 ID。您可以改为将所有多个 ID 更改为类。

尝试这个：

$('#checkbox').on('change', function() {
    if (this.checked) {
        $(this).closest('div').find('input').removeAttr("disabled");
    }
});

演示在这里

或者，如果您想上课（通过在我的演示中将您ID的 's 更改为喜欢）：Class

$('#checkbox').on('change', function() {
    if (this.checked) {
        $(this).closest('div').find('.inputbox').removeAttr("disabled");
    }
});

演示在这里

于 2013-08-27T15:02:07.073 回答
0 
$('#checkbox').click(function() { 
        $(".inputbox").prop("disabled",false);

});

“输入框”将其作为类。

演示

于 2013-08-27T14:57:54.350 回答
0 
$('#checkbox').click(function() { 
        $("input:text").prop("disabled",false);
});
于 2013-08-27T15:00:14.547 回答
0

解决了！将输入 id 改为类。

<div class="large-4 columns">
   <label for="checkbox"><input type="checkbox" id="checkbox">co-applicant</label>

   <div class="large-12 columns">
      <input type="text" class="inputbox" required pattern="[a-zA-Z]+" placeholder="First name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="text" class="inputbox" required pattern="[a-zA-Z]+" placeholder="Last name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="email" class="inputbox" required placeholder="Email" disabled="disabled">
   </div>
</div>

和jQuery：

<script>
 $('#checkbox').change(function() {
      $('.inputbox').attr('disabled',!this.checked);
  });
</script>
于 2013-08-27T15:06:30.840 回答