jquery - jqueryで1つのチェックボックスで複数の入力テキストフィールドを有効にする方法は?

Question

デフォルトで無効になっている複数のテキスト フィールドがあり、それらの上に 1 つのチェックボックスがあります。このチェックボックスをオンにすると、すべてのテキスト フィールドが有効になります。

**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))
});

デモ1

タイプの更新Email:

別の ' を使用している場合はtype、で選択input

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

デモ2

Answer 2

解決しました！代わりに入力 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>

Answer 3

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

});

「inputbox」はクラス化しています。

デモ

Answer 4

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