3

私のウェブサイトでは、PHP、Smarty、jQuery などと一緒に ezMark ライブラリを使用しています。ここでは、いくつかの条件に応じていくつかのチェックボックスを無効にしたいウェブページの 1 つを使用しています。その後、1 つの親チェック ボックスがあり、それを選択すると、無効になっていないすべてのチェックボックスがチェックされ、親チェック ボックスの選択を解除すると逆に機能するはずです。また、親チェックボックスをチェックした後、選択したチェックボックス(無効になっていない)のいずれかをオフにすると、親チェックボックスもオフになります。チェックボックスをチェックしたりチェックを外したりする通常のコードでこれを達成するために多くのことを試みましたが(.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>タグがどこから来ているのかわかりません。したがって、親チェックボックスの選択時にすべての子チェックボックスをチェックおよびチェック解除するために、上記のロジックを記述しました。このdivタグと ezMark ライブラリが原因で、通常のロジックが機能しません。現在のコードでは、親チェックボックスを選択すると、無効になっているものを含め、すべての子チェックボックスが選択され、親チェックボックスをオフにすると、すべての子チェックボックスが選択解除されます。このシナリオで子チェックボックスの選択と選択解除の必要な機能を実現する方法を示すことで助けてもらえますか? 前もって感謝します。

4

1 に答える 1