javascript - jQuery:切换字段属性:未选中复选框表示禁用

Question

我希望能够在(“更新数据？”)复选框被选中时编辑多选字段，并在复选框时再次禁用该字段未选中。

重要的是，选中状态始终导致能够编辑，同时未选中意味着字段禁用，无论我是否加载表单带有选中框或未选中作为初始状态(我可以保存或)

我找到了几个有用的答案，但在语法上遇到了困难，无法将这些答案合并到我的解决方案中。

下面可以切换一次，然后就卡住了:

$(function() {
  $("#checkbox1").change(function() {
    if ($("#field2").attr('disabled', !this.checked)) {
      $("#field2").removeAttr("disabled");
    } else {
      $("#field2").attr("disabled", "disabled");
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <div id="div_id_product" class="form-group row"> <label for="field2" class="col-form-label col-sm-4">
                Multiselect
            </label>
    <div class="col-sm-7">
      <select name="multiselect" class="select2-show-search selectmultiple form-control" id="field2" disabled="disabled" multiple style="width: 100%;">
        <option value="1" selected>Product 1 </option>
        <option value="3" selected>Product 3</option>
        <option value="2">Product 2</option>

      </select>
    </div>
  </div>
  <div class="form-group row" id="checkbox1"> <label for="id_to_update" class="col-form-label col-sm-4">
            Update Data?
        </label>
    <div class="col-sm-7">
      <div class="input-group"> <input type="checkbox" name="to_update" class="checkboxinput" id="id_to_update"> <span class="input-group-append"></span> </div>
    </div>
  </div>
</form>

Answer 1

把你的JS改成这样就可以了。您的 change 监听器的 ID 错误。
监听器应位于 #id_to_update(输入)，而不是 #checkbox1(即 div)。

$(function() {
    $("#id_to_update").change(function() {
        $("#field2").prop('disabled', !this.checked);
    });
})