1 回答
TA贡献1869条经验 获得超4个赞
您可能需要调整此解决方案以适合您当前的标记。我试图让它看起来更容易理解。
假设您使用此标记:
<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);
});
});
});
添加回答
举报