【问题标题】:How to work with checkboxes generated from ezMark?如何使用 ezMark 生成的复选框?
【发布时间】:2013-10-07 11:28:21
【问题描述】:

我在我的网站中使用 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>

用于创建多个复选框的 smarty 代码:

{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 元素检查器时,我得到了为子复选框创建的不同 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>

我不知道这个&lt;div&gt; 标签的来源。因此,为了检查和取消选中选择括号复选框的所有子复选框,我在上面编写了逻辑。由于这个 div 标签和 ezMark 库,正常逻辑无法正常工作。使用当前代码,所有子复选框都被选中,包括在选择父复选框时禁用的复选框,并且在取消选中父复选框时,所有子复选框都将被取消选中。您能否通过展示如何在这种情况下实现选择和取消选择子复选框的所需功能来提供帮助?提前致谢。

【问题讨论】:

  • 输入会自动关闭&lt;input /&gt; - 这只是一个说明,(可能)对您的问题没有影响。
  • 啊,回过头来看它看起来像 FireBug 或预处理器做了这个。忽略之前的说法。
  • @rlemon:供您参考,我给您一个链接如下:itsalif.info/content/demo-ezmark-jquery-plugin 到这里看看
    标签是如何添加到 firebug 中的。这真是摆在我面前的大问题。请帮我解决这个问题。感谢您的关注。
  • 是的,我没有回答,因为这个问题不在我的专业范围内,但是我确实注意到渲染输出中的输入是错误的,因此是评论。

标签: javascript jquery html checkbox smarty


【解决方案1】:

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

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

希望对你有所帮助;)

【讨论】:

  • 我在我的网页中使用 ezmark 复选框,问题是当我单击一个按钮将选中的值添加到表中时,它只工作一次,然后它什么也没返回。任何帮助请
  • 您应该为此打开一个单独的问题并提供您的 js 和 html 代码
猜你喜欢
相关资源
最近更新 更多
热门标签