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

Question

我在我的网站上使用 ezMark 库以及 PHP、Smarty、jQuery 等。在其中一个网页上，我想根据某些情况禁用几个复选框。之后是一个父复选框，选择它后，所有未禁用的复选框都应该被选中，反之亦然，取消选择父复选框。此外，如果我取消选中任何一个选定的复选框(未禁用)，则在选中父复选框后，父复选框也应该被取消选中。我尝试了很多通过检查和取消选中复选框的常规代码来实现这一点 (.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 库。使用当前代码，所有子复选框都被选中，包括在选择父复选框时禁用的复选框，并且在取消选中父复选框时，所有子复选框都被取消选中。您能否通过展示如何在这种情况下实现选择和取消选择子复选框所需的功能来提供帮助？提前致谢。

Answer 1

jQuery.ezMark生成的结构实现你想要的并不是真正的问题。我写了this jsFiddle向您展示一种基于 css 类来识别父级 (.l0) 和子级 (.l1) 的方法。

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

希望这对你有帮助;)