javascript - 使用相应的复选框 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'));
});

here is fiddle

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>