如何在更改其他输入时禁用输入 (jQuery)

Question

我想添加属性 disabled 以输入 #stock 如果 #option_name-x 不为空。只有当我在 #option_value_1 中输入内容时，我的代码才有效，但如果我离开 #option_value_1[=23=，它就不起作用] 清空并在 #option_value_2 或以下内容中输入内容。换句话说，该代码仅适用于第一个输入。

<tr> <td><input name="option_name[]" id="option_name_1" type="text"></td> </tr> <tr> <td><input name="option_name[]" id="option_name_2" type="text"></td> </tr> <tr> <td><input name="option_name[]" id="option_name_3" type="text"></td> </tr> <tr> <td><input name="option_name[]" id="option_name_4" type="text"></td> </tr> <tr> <td><input name="option_name[]" id="option_name_5" type="text"></td> </tr> <tr> <td> Stock (*disabled if any option_name field is NOT EMPTY*)<br> <input name="stock" id="stock" type="text"> </td> </tr> // on input change $("input").change(function() { // i want to react on whichever input with id starting with "option_name" if($("[id^='option_name']").val() !== "") { $("#stock").attr('disabled', 'disabled'); } else { $("#stock").removeAttr('disabled', 'disabled'); } })

Answer 1

您可以使用.filter() to get inputs i.e. $("[id^='option_name']") have value and .prop()设置属性。

// on input change
$("input").change(function() {
  var optionsInputHavevalue = $("[id^='option_name']").filter(function() {
    return $(this).val().trim().length > 0 ;
  }).length > 0;
  $("#stock").prop('disabled', !optionsInputHavevalue);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input name="option_name[]" id="option_name_1" type="text"></td>
  </tr>
  <tr>
    <td><input name="option_name[]" id="option_name_2" type="text"></td>
  </tr>
  <tr>
    <td><input name="option_name[]" id="option_name_3" type="text"></td>
  </tr>
  <tr>
    <td><input name="option_name[]" id="option_name_4" type="text"></td>
  </tr>
  <tr>
    <td><input name="option_name[]" id="option_name_5" type="text"></td>
  </tr>
  <tr>
    <td>
      Stock (*disabled if any option_name field is NOT EMPTY*)<br>
      <input name="stock" id="stock" type="text" >
    </td>
  </tr>

</table>

Answer 2

我希望这对你有用，永远记住 on 在这种情况下更好，你可能还需要在 paste 上执行它

// on input change
$("input").on("change paste keyup", function() {
  var optionsInputHavevalue = $("[id^='option_name']").filter(function() {
    return $(this).val().trim().length > 0 ;
  }).length > 0;
  $("#stock").prop('disabled', optionsInputHavevalue);
}).change();

可以在这里找到工作箱。 https://jsbin.com/zojukij/edit?html,js,output

如何在更改其他输入时禁用输入 (jQuery)

How to disable an input on change of other inputs (jQuery)

html

jquery

onchange

disabled-input