您可能需要調整此解決方案以適合您當前的標記。我試圖讓它看起來更容易理解。
假設您使用此標記：
<section id="users">
? <h3>
? ? Users
? </h3>
? <label>View</label>
? <input type="checkbox" value="view" data-group="users" />
? <label>Edit</label>
? <input type="checkbox" value="edit" data-group="users" />
? <label>Manage</label>
? <input type="checkbox" value="manage" data-group="users" />
</section>
<section id="library">
? <h3>
? ? Library
? </h3>
? <label>View</label>
? <input type="checkbox" value="view" data-group="library" />
? <label>Edit</label>
? <input type="checkbox" value="edit" data-group="library" />
? <label>Lend</label>
? <input type="checkbox" value="lend" data-group="library" />
? <label>Manage</label>
? <input type="checkbox" value="manage" data-group="library" />
</section>
<section id="textBooks">
? <h3>
? ? Text Books
? </h3>
? <label>View</label>
? <input type="checkbox" value="view" data-group="textBooks" />
? <label>Edit</label>
? <input type="checkbox" value="edit" data-group="textBooks" />
? <label>Lend</label>
? <input type="checkbox" value="lend" data-group="textBooks" />
? <label>Manage</label>
? <input type="checkbox" value="manage" data-group="textBooks" />
</section>
<section id="teacherBooks">
? <h3>
? ? Teacher Books
? </h3>
? <label>View</label>
? <input type="checkbox" value="view" data-group="teacherBooks" />
? <label>Edit</label>
? <input type="checkbox" value="edit" data-group="teacherBooks" />
? <label>Lend</label>
? <input type="checkbox" value="lend" data-group="teacherBooks" />
? <label>Manage</label>
? <input type="checkbox" value="manage" data-group="teacherBooks" />
</section>
這里的關鍵是將復選框鏈接到組中。我用了一個data-group屬性。
然后你可以在你的 JavaScript (jQuery) 代碼中包含這些行：
$(function() {
? // By having a set of rules defined like this it makes it easier for you to expand them
? const ruleSet = [{
? ? ? checked: "manage",
? ? ? checkAndDisable: ["view", "edit", "lend"]
? ? },
? ? {
? ? ? checked: "view",
? ? ? checkAndDisable: []
? ? },
? ? {
? ? ? checked: "edit",
? ? ? checkAndDisable: ["view"]
? ? },
? ? {
? ? ? checked: "lend",
? ? ? checkAndDisable: ["view", "edit"]
? ? }
? ];
? const toggleElementsCheck = (elements, toggle) => {
? ? elements.each(function() {
? ? ? $(this).prop("checked", toggle);
? ? })
? };
? const toggleElementsDisable = (elements, toggle) => {
? ? elements.each(function() {
? ? ? $(this).prop("disabled", toggle);
? ? })
? };
? $("input[type=checkbox]").on("click", function() {
? ? // Which data-group the clicked checkbox belongs into?
? ? const group = $(this).data("group");
? ? // What are the other checkboxes in this group?
? ? const checkboxes = $("input[data-group=" + group + "]").not($(this));
? ? // What's the value of the clicked checkbox?
? ? const value = $(this).val();
? ? // What are the rules for this group of checkboxes?
? ? const rule = ruleSet.find(x => x.checked === value);
? ? // What are the values of the checkboxes that need manipulation on this group?
? ? const checkAndDisable = rule.checkAndDisable;
? ? // Does this click represents a "check" or an "uncheck"?
? ? const isChecked = $(this).is(":checked");
? ? // Loop through the checkboxes in this group and manipulate them accordingly
? ? $(checkboxes).each(function() {
? ? ? let value = $(this).val();
? ? ? let toggle = checkAndDisable.includes(value);
? ? ? toggleElementsCheck($(this), isChecked ? toggle : false);
? ? ? toggleElementsDisable($(this), isChecked ? toggle : false);
? ? });
? });
});
