Question

我有多个默认情况下禁用的文本字段，我们上方有一个复选框。我想要在选中此复选框时启用所有文本字段。

**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代码 - 我应该把它放在哪里才能最好地工作？

感谢您的帮助！

Answer 1

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

Demo1

Email类型的更新：

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

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

Demo2

Answer 2

$('#checkbox').click(function() { 
        $(".inputbox").prop("disabled",false);

});

“inputbox”将其设为类。

DEMO

Answer 3

$('#checkbox').click(function() { 
        $("input:text").prop("disabled",false);
});

Answer 4

您必须拥有unique ID's 。您可以改为将所有多个ID更改为Classes。

试试这个：

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

演示 here

或者，如果您想要上课（将ID更改为Class，就像在我的演示中一样）：

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

演示 here

Answer 5

解决了！将输入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>

如何使用一个带jquery的复选框启用多个输入文本字段？

5 个答案:

演示 here