1

我有一个在表单加载时应该隐藏的选择控件。我有一个父复选框和一组子复选框。我想要实现的是，除非选中父复选框或子复选框中的至少一个（或多个）复选框，否则不应显示 Select 控件，它应该保持隐藏状态。如果选中子复选框中的父复选框或任何一个（或多个）复选框，则应显示选择控件。显示选择控件的另一个条件是 ID为 site_id的字段应仅包含值 XYZ。如果它有一些不同的值，那么即使在选择父复选框或子复选框中的任何一个或多个复选框后，也不应显示选择控件。我的代码片段如下：

<!--The code below is for parent checkbox-->
<input type="hidden" value="XYZ" id="site_id" name="site _id">
<p class="custom-form">
 <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
 <a class="drop" href="#">more</a>
</p> 
<!--Parent checkbox code ends here-->
<!--The code below is for select control-->
<select name="select_option">
  <option value="0">--Select Action--</option>
  <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
  <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
  <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
  <option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!--Select code ends here-->
<!--The code below is for child checkboxes-->
<input class="custom-check" type="checkbox" name="item[]" id="" value="d3c1ac9ac08da86e73258a11a43251af">
<input class="custom-check" type="checkbox" name="item[]" id="" value="b993166c4795b3bfe96640e55e8dcbbc">
<input class="custom-check" type="checkbox" name="item[]" id="" value="77d4721ada7677feda77a250c7cee1c4">
<input class="custom-check" type="checkbox" name="item[]" id="" value="68d6e7a8c09c77c5fec49945beaea4f8">
<input class="custom-check" type="checkbox" name="item[]" id="" value="85634bc9cdbcb6b39eaf4946b99db5de">
<input class="custom-check" type="checkbox" name="item[]" id="" value="bb1a20794d65966b950c5933100496ce">
<input class="custom-check" type="checkbox" name="item[]" id="" value="59ee376a9d126a26b350fff3110ea825">
<input class="custom-check" type="checkbox" name="item[]" id="" value="428895b1ae5f3226345e6c6f256c7c85">
<!--In the same manner other child checkboxes will come-->
<!--Child checkboxes code ends here-->

你能在这方面帮助我吗？提前致谢。检查父复选框时检查所有复选框的jQuery代码如下：

$("#ckbCheckAll").click(function () { 
  $(".ez-checkbox input").toggleClass("ez-checked", this.checked);
    if ($(this).is(':not(:checked)'))
      $(".ez-checkbox input").removeAttr('checked');
    if($(this).is(':checked'))
      $(".ez-checkbox input").attr('checked','checked');
    $(".ez-checkbox input").closest("div").toggleClass("ez-checked", this.checked);;
});
4

1 回答 1

0

我希望这会有所帮助...我已经修改了您的 HTML 以在子复选框周围包含一个 div，以及隐藏选择框的 ID 字段：

<!--The code below is for parent checkbox-->
<input type="hidden" value="XYZ" id="site_id" name="site _id">
<p class="custom-form">
 <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
 <a class="drop" href="#">more</a>
</p> 
<!--Parent checkbox code ends here-->
<!--The code below is for select control-->
<select name="select_option" id="hiddenSelect">
  <option value="0">--Select Action--</option>
  <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
  <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
  <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
  <option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!--Select code ends here-->

<!--The code below is for child checkboxes-->
<div id="childBoxes">
    <input class="custom-check" type="checkbox" name="item[]" id="" value="d3c1ac9ac08da86e73258a11a43251af"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox1" value="b993166c4795b3bfe96640e55e8dcbbc"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox2" value="77d4721ada7677feda77a250c7cee1c4"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox3" value="68d6e7a8c09c77c5fec49945beaea4f8"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox4" value="85634bc9cdbcb6b39eaf4946b99db5de"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox5" value="bb1a20794d65966b950c5933100496ce"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox6" value="59ee376a9d126a26b350fff3110ea825"/>
    <input class="custom-check" type="checkbox" name="item[]" id="Checkbox7" value="428895b1ae5f3226345e6c6f256c7c85"/>
    <!--In the same manner other child checkboxes will come-->
</div>
<!--Child checkboxes code ends here-->

我不清楚您上面的 javascript，因为它似乎试图切换复选框显示，但与您的问题无关。但是，这是您所说的问题的解决方案：

<script>
    $('#hiddenSelect').hide();
    if ($('#site_id').val() == "XYZ") {

        $("#ckbCheckAll").click(function () {
            displaySelect();
        });

        $('#childBoxes :input').click(function () {
            displaySelect();
        });

        function displaySelect() {
            var childChecked = $('#childBoxes').find('input[type=checkbox]:checked');
            var parentChecked = $('#ckbCheckAll').is(':checked');

            if (childChecked.length > 0 || parentChecked) {
                $('#hiddenSelect').show();
            } else {
                $('#hiddenSelect').hide();
            }
        }
    }
</script>

编辑：阅读问题标题后，您可以使用 $('#hiddenSelect').fadeIn('400') 或 $('#hiddenSelect').fadeOut('400') 代替 .show 和 .hide，达到同样的效果。

于 2013-10-15T17:59:52.823 回答