如何在更改其他输入时禁用输入（jQuery）答案

【问题标题】：How to disable an input on change of other inputs (jQuery)如何在更改其他输入时禁用输入（jQuery）
【发布时间】：2019-04-05 11:32:58
【问题描述】：

如果 #option_name-x 的任一值不为空，我想添加属性 disabled 以输入 #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'); 
        }
})

【问题讨论】：

标签： jquery html onchange disabled-input

【解决方案1】：

我希望这对你很有效，永远记住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

【讨论】：

相反。如果#option_name 不是空的，我想添加一个属性 DISABLED。
已更正，请立即查看

【解决方案2】：

您可以使用.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>

【讨论】：