如何使用从ezMark生成的复选框？

user2838698 发表于 Dev

用户名

我在我的网站中使用ezMark库以及PHP，Smarty，jQuery等。在这里的一个网页上，我希望根据某些条件禁用一些复选框。之后，有一个父复选框，选中后，所有未禁用的复选框都应选中，反之亦然。同样，在选中父复选框后，如果我取消选中任何未选中的复选框（未禁用），则父复选框也应未选中。我尝试了很多的检查和uncheking复选框的常规代码实现这一目标(.attr('checked','checked')，并.removeAttr('checked');分别），但在这种情况下，由于ezMark库不起作用。现在，我使用以下代码来检查和取消选中复选框，如下所示：父复选框的代码：

<p id="parentCheckbox" class="custom-form"> 
  <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
  <a class="drop" href="#">more</a> 
</p>

用于创建多个复选框的智能代码：

{section name=tests loop=$all_tests}
<p class="custom-form"> 
  <input class="custom-check checkBoxClass" type="checkbox" name="" id="" {if $all_tests[tests].is_test_lock!=1 && $all_tests[tests].test_assign_to_package=='no'} {else} disabled {/if}>
  <label>{$all_tests[tests].test_name}</label>
</p>
{/section}

用于在父复选框之后选择和取消选择复选框的jQuery代码：

$(document).ready(function()  { 
$("#ckbCheckAll").click(function () { 
  if ($(this).is(':not(:checked)'))
    $(".ez-checkbox").removeClass("ez-checked");

  if($(this).is(':checked'))
      $(".ez-checkbox").addClass("ez-checked");
  });
});

当我查看Firbug Element Inspector时，正在为子复选框创建不同的HTML，如下所示：

<p class="custom-form">
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name=""></input></div>
<label>N1P: Gravitation</label>
</p>

我不是从这个<div>标签来的。因此，为了在选中paren复选框时选中并取消选中所有子复选框，我在逻辑上方编写了该复选框。由于此div标签和ezMark库，常规逻辑无法正常工作。使用当前代码，选中所有父复选框后，所有子复选框都将被选中，包括禁用的子复选框；而取消选中父复选框后，所有子复选框都将被取消选中。在这种情况下，您可以通过显示如何实现选择和取消选择子复选框的功能来提供帮助吗？提前致谢。

rd3n

该jQuery.ezMark产生的结构是不是真的达到你想要什么的问题。我写了这个jsFiddle来向您展示一种基于css类进行识别父级（.l0）和子级（.l1）的方法。

我手动禁用了一些复选框作为示例，但是您可以使用条件来禁用它们。

希望这可以帮到你 ;）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-3

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章