Question

如果＃option_name-x 的值不为空，我想添加属性 disable d输入 #stock 。仅当我在＃option_value_1 中输入内容时，我的代码才能工作，但如果我将＃option_value_1 留空并在＃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()获取输入，即$("[id^='option_name']")具有值，而.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）

2 个答案: