在左侧标记 onclick 复选框

Question

我有这个烫发管理表格来为用户设置烫发。我的想法是：

• 选择“管理”时，查看/编辑/借出也会被选中并被禁用。

• 如果任何其他人被选中，则左侧的其余部分也应被选中和禁用。

这个想法是用户不能选择编辑但不能查看，或者借出但不能编辑......等等......但是如果例如编辑被选中，则借出不会而视图会。

代码片段：

$('.manage_check').on('change',function(){
  $(this).parents('.perms-group').find('input[type="checkbox"]:not(".manage_check")').click();
  $(this).parents('.perms-group').find('input[type="checkbox"]:not(".manage_check")').prop("disabled",true);
});

问题是：

选中某个部分的“管理”时，如何设置禁用所有权限？

选择编辑或借出时如何检查和禁用视图？。

第二个项目符号解释：

If you select "view" -> View gets selected as normal.

If you select "edit" -> view gets selected and disabled.

If you select "Lend" -> view/edit get selected and disabled.

If you select "Manage" -> view/edit/lend get selected and disabled.

它也应该是可切换的，所以当取消选择它时，它会取消选中并启用切换器。此外，由于选择函数执行 .click()，如果您选择视图然后选择“管理”，它会取消选中视图并选中编辑。选择“管理”时，它应该始终检查，而不是.click

PD：这来自我今天发表的另一篇文章，但由于我已经关闭了它，所以最好用新问题创建一个新文章。

Answer 1

您可能需要调整此解决方案以适合您当前的标记。我试图让它看起来更容易理解。假设您使用此标记：<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);    });  });});