为了账号安全,请及时绑定邮箱和手机立即绑定

在左侧标记 onclick 复选框

在左侧标记 onclick 复选框

慕容森 2023-04-27 16:48:42
我有这个烫发管理表格来为用户设置烫发。我的想法是:选择“管理”时,查看/编辑/借出也会被选中并被禁用。如果任何其他人被选中,则左侧的其余部分也应被选中和禁用。这个想法是用户不能选择编辑但不能查看,或者借出但不能编辑......等等......但是如果例如编辑被选中,则借出不会而视图会。代码片段:$('.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(),如果您选择视图然后选择“管理”,它会取消选中视图并选中编辑。选择“管理”时,它应该始终检查,而不是.clickPD:这来自我今天发表的另一篇文章,但由于我已经关闭了它,所以最好用新问题创建一个新文章。
查看完整描述

1 回答

?
MMTTMM

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);

    });

  });

});


查看完整回答
反对 回复 2023-04-27
  • 1 回答
  • 0 关注
  • 89 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信