html - 启用或禁用输入如何根据选择选项的值使用 jQuery？

Question

我有一个选择和两个输入。我希望当我从选择元素中选择 2nd 选项时，two 输入将被停用。

我的代码在下面，但输入没有被禁用，我该如何让它工作？

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();
  if (stateID != 2) {
    $("divb").attr("disabled", true);
    $("divn").attr("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select class="form-control" name="category_id" id="category_id">
      <option>select</option>
      <option value="1">choose1</option>
      <option value="2">choose2</option>
    </select>
  </div>
  <div class="form-group" id="divb">
    <label>business <span class="text-hightlight">*</span></label>
    <input type="text" name="entreprise" id="entreprise" class="form-control" />
  </div>
  <div class="form-group" id="divn">
    <label>name Piece <span class="text-hightlight">*</span></label>
    <input type="text" name="piece" class="form-control" />
  </div>
</div>

Answer 1

你快到了。您可以使用attr 或prop 中的任何一个。您做错的唯一一件事是您禁用 实际的divs 而不是input 本身。禁用属性仅适用于 inputs 而不是 div elements

要禁用实际的输入，我们可以使用 jQuery decendant selector - 此外，在您当前的 jQuery code 中，您还缺少 # 选择器符号。

编辑:添加了prop方法，但如果您仅禁用输入，您也可以使用attr

这是一个后代选择器的例子

$("#divb > input").prop("disabled", true);
$("#divn > input").prop("disabled", true);

实时工作代码:

$(document).on('change', '#category_id', function() {
  var stateID = $(this).val();
  if (stateID == '2') {
    $("#divb > input").prop("disabled", true);
    $("#divn > input").prop("disabled", true);
  } else {
    $("#divb > input").prop("disabled", false);
    $("#divn > input").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select class="form-control" name="category_id" id="category_id">
      <option>select</option>
      <option value="1">choose1</option>
      <option value="2">choose2</option>
    </select>
  </div>
  <div class="form-group" id="divb">
    <label>business <span class="text-hightlight">*</span></label>
    <input type="text" name="entreprise" id="entreprise" class="form-control" />
  </div>
  <div class="form-group" id="divn">
    <label>name Piece <span class="text-hightlight">*</span></label>
    <input type="text" name="piece" class="form-control" />
  </div>
</div>