如何使用jquery禁用html中的节？

Question

我有一个如下图所示的部分，

点击“我当前正在工作”后，我想禁用以下部分。我不想删除该部分，我只想调暗并禁用该部分。我怎么能用html和jquery做到这一点？

Answer 1

干得好

JSFiddle Demo

change事件侦听复选框的更改，我使用"#checkbox"指定。使用change非常重要，因此您可以切换disable属性。

.attr("disabled", true);添加了disabled属性。假的恰恰相反。

$("#checkbox").change(function() {
    if(this.checked) {
        $("#end-month").attr("disabled", true);
    } else {
    	$("#end-month").attr("disabled", false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="checkbox" type="checkbox">
<label for="checkbox">I am currently working here</label>

<br>

<select id="end-month">
  <option value="date">date</option>
  <option value="another-date">another date</option>
</select>

Answer 2

禁用id中的所有元素，这些元素位于data-disable属性中。如果你想隐藏，请使用注释代码而不是dest.attr（）。

$("input[type='checkbox'][data-disable]").on("click", function () {
  var dest = $("#" + $(this).data("disable")).find(":input");
  if ($(this).is(':checked')) {
    dest.attr("disabled", "disabled");
    //dest.hide();
  } else {
    dest.attr("disabled", false);
    //dest.show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <label><input type="checkbox" data-disable="idToHide"/> Disable</label>
    <div id="idToHide">
        <select><option>test</option></select>
    </div>
</form>

Answer 3

如果您使用表单和输入，解决方案不必是jQuery，您只需在输入中添加disabled属性即可。

https://codepen.io/limxz/pen/XQdPXO

以下是一些参考资料。 https://www.w3schools.com/tags/att_select_disabled.asp

这是一个没有jQuery的简化演示

var checkboxInput = document.querySelector("#checkbox-input");
var dropdownInput = document.querySelector("#dropdown-input");

checkboxInput.addEventListener("change", function(e) {
  e.preventDefault();
  if (checkboxInput.value) {
    dropdownInput.setAttribute("disabled", "");
  }
});