啟用禁用輸入文本及其相應的復選框jQuery

Question

有幾行，每行都有一個復選框，一個標簽和一個輸入文本

選中復選框后，如何使用jquery啟用/禁用復選框的鄰居輸入文本。 我的意思是只啟用/禁用與復選框在同一行的輸入

我有：

<form>
    <p>         
        <input id="chk1" type="checkbox">
  <label >text 1 </label>
  <input id="input1" type="text">
    </p>
    <p>
      <input id="chk2" type="checkbox">
  <label >text 2 </label>
  <input id="input2" type="text">
    </p>
<p>
      <input id="chk3" type="checkbox">
  <label >text 3 </label>
  <input id="input3" type="text">
    </p>
</form>

而且不知道該怎么做

$(':checkbox').change(function(){
   $('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});

這是小提琴

Answer 1

也許像這樣：

 $(':checkbox').change(function(){ var this_nr=$(this).attr('id').substr(-1); $('#input'+this_nr).prop('disabled', !$(this).is(':checked')); }); $(':checkbox').change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <p> <input id="chk1" type="checkbox"> <label >text 1 </label> <input id="input1" type="text"> </p> <p> <input id="chk2" type="checkbox"> <label >text 2 </label> <input id="input2" type="text"> </p> <p> <input id="chk3" type="checkbox"> <label >text 3 </label> <input id="input3" type="text"> </p> </form> 

或像這樣：

 $(':checkbox').change(function(){ $('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked')); }); $(':checkbox').change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> <p> <input id="chk1" type="checkbox"> <label >text 1 </label> <input id="input1" type="text"> </p> <p> <input id="chk2" type="checkbox"> <label >text 2 </label> <input id="input2" type="text"> </p> <p> <input id="chk3" type="checkbox"> <label >text 3 </label> <input id="input3" type="text"> </p> </form> 

Answer 2

我將在窗體上使用事件委托，在處理程序中使用nextAll查找下一個文本框。

 // disable all the text fields $('#myform :text').each(function () { $(this).prop('disabled', true); }); $('#myform').on('change', ':checkbox', function (evt) { let textbox = $(this).nextAll(':text'); textbox.prop('disabled', (i, val) => !val); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform"> <p> <input id="chk1" type="checkbox"> <label for="chk1">text 1 </label> <input id="input1" type="text"> </p> <p> <input id="chk2" type="checkbox"> <label for="chk2">text 2 </label> <input id="input2" type="text"> </p> <p> <input id="chk3" type="checkbox"> <label for="chk3">text 3 </label> <input id="input3" type="text"> </p> <p> <label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br> <label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS"> </p> </form> 

如果您的整個表單都在此復選框后跟文本框表單中，則此方法有效； 如果您有其他無法控制一個或多個不應禁用的文本框的復選框，它將中斷。 為了更加靈活，我將一個類添加到我希望具有此行為的項目中：

 // disable all the text fields $('#myform :text.toggle-input').each(function () { $(this).prop('disabled', true); }); $('#myform').on('change', ':checkbox.toggle-input', function (evt) { let textbox = $(this).nextAll(':text.toggle-input'); textbox.prop('disabled', (i, val) => !val); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform"> <p> <input id="chk1" class="toggle-input" type="checkbox"> <label for="chk1">text 1 </label> <input id="input1" class="toggle-input" type="text"> </p> <p> <input id="chk2" class="toggle-input" type="checkbox"> <label for="chk2">text 2 </label> <input id="input2" class="toggle-input" type="text"> </p> <p> <input id="chk3" class="toggle-input" type="checkbox"> <label for="chk3">text 3 </label> <input id="input3" class="toggle-input" type="text"> </p> <p> <label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br> <label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS"> </p> </form> 

Answer 3

您可以使用jQuery siblings函數來檢索相鄰的文本框，並根據.checked屬性啟用/禁用它。 我在最后調用了.change()來設置文本框的初始狀態。

 $(":checkbox") .change(function() { $(this) .siblings("input[type='text']") .prop("disabled", !this.checked); }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p> <input id="chk1" type="checkbox"> <label>text 1 </label> <input id="input1" type="text"> </p> <p> <input id="chk2" type="checkbox"> <label>text 2 </label> <input id="input2" type="text"> </p> <p> <input id="chk3" type="checkbox"> <label>text 3 </label> <input id="input3" type="text"> </p> </form>