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）的方法。

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

希望这可以帮到你;）

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

1 个答案: