如何在jquery和php中动态禁用循环中的复选框

Question

首先，对不起我的英语；我有一个表单，其中有一个从表中获取的循环中的主复选框，以及与主复选框相关的内部复选框。

我的问题是：如果我选中主复选框，则只应启用父复选框，如果我选中一个子复选框，则其他复选框应仅在选中的父复选框下禁用，依此类推。我只是能够做到这一点，因为我是 jQuery 的新手，如果有人有解决方案，它将被应用。

     $('input[class^="class"]').click(function() {
        var $this = $(this);
        if ($this.is(".class1")) {
            if ($(".class1:checked").length > 0) {
                $(".class3").prop({ disabled: false, checked: false });
            } else {
                $(".class3").prop("disabled", true);
            }
        } if ($this.is(".class3")) {
            if ($this.is(":checked")) {
                $(".class3").not($this).prop({ disabled: true, checked: false });

            } else {
                $(".class3").prop("disabled", false);
            }
        }

});


<ul>
    <?php for($i=0; $i<=2; $i++){?>
        <li><input type="checkbox" name="checkbox[]" class="class1" value="Checkbox1" />Checkbox1</a>
<ul>
    <li><a href="#"><input type="checkbox" name="checkbox[]" class="class3" value="Checkbox2" disabled="disabled" />Checkbox2</a></li>
    <li><a href="#"><input type="checkbox" name="checkbox[]" class="class3" value="Checkbox3" disabled="disabled" />Checkbox2</a></li>

</ul>
</li><?php }?>

Answer 1

试试这个

jQuery 代码

 $(document).ready(function(){
    $('input[class^="class1"]').click(function() {

            var $this = $(this);
            var data_id = $this.attr('data-id');

            if ($this.is(".class1")) {
                if ($(".class1:checked").length > 0) {
                    $(".class3"+data_id).prop({ disabled: false, checked: false });
                } else {
                    $(".class3"+data_id).prop("disabled", true);
                }
            } 
    });
       $('.subcheck').click(function() {
       var val=$(this).attr("data-id");

       if($(".sub"+val).is(":checked"))
       {
         $(".sub"+val).prop("disabled", true);
         $(this).prop("disabled", false);
       }
      else
      {
        $(".sub"+val).prop("disabled", false);
      }
     });
       });

HTML 代码

 <ul>
    <?php for($i=0; $i<=2; $i++){?>
        <li><input type="checkbox" name="checkbox[]" id="mainchk" data-id="<?php echo $i; ?>" class="class1" value="Checkbox1" />Checkbox1</a>
<ul>
    <li><a href="#"><input type="checkbox" name="checkbox[]" data-id="<?php echo $i; ?>" class="subcheck  class3<?php echo $i; ?> sub<?php echo $i; ?>" value="Checkbox2" disabled="disabled" />Checkbox2</a></li>
    <li><a href="#"><input type="checkbox" name="checkbox[]" data-id="<?php echo $i; ?>" class="subcheck class3<?php echo $i; ?> sub<?php echo $i; ?>" value="Checkbox3" disabled="disabled" />Checkbox2</a></li>

</ul>
</li><?php }?>
</ul>

Answer 2

@RameshSingh，总是将您的代码分解为可重用和简单的功能，在这里我创建了您理想的具有简单和可重用功能的复选框树...

您可以看到结果HERE。 ;)

HTML：

<ul id="parentList" style="margin-top:50px;">   
  <li>
    <a href="#">
         <input type="checkbox" name="checkbox[]" id="parentChbox" class="chbox" value="1"  />Checkbox1
    </a>
  </li>
<ul id="childList">
    <li>
        <a href="#">
            <input type="checkbox" name="checkbox[]" class="chbox childchbox" value="2" />Checkbox2
        </a>
    </li>
    <li>
        <a href="#">
            <input type="checkbox" name="checkbox[]" class="chbox childchbox" value="3" />Checkbox2
        </a>
    </li>
 </ul>
</ul>

JS 和 jQuery 函数：

    $('input[class*="chbox"]').click(function() {

    var $this = $(this);

    var $parentCheckbox=$("input#parentChbox");
    var $parentCheckboxIsChecked=$("input#parentChbox:checked");
    var $childrenCheckboxs = $("#childList  input.childchbox");

    if ($this.is) {
        if ($parentCheckboxIsChecked.length>0) {
             disableCheckboxs($childrenCheckboxs);           
        } else {
             enableCheckboxs($childrenCheckboxs);
            var $checkedChild = checkedChild($childrenCheckboxs);            
            if (typeof $checkedChild !== "undefined")
                disableAndUncheckedAllCheckboxsElse($checkedChild,$childrenCheckboxs)             
        }
    }
});

function disableAndUncheckedAllCheckboxsElse(elseCheckbox,allCheckboxs){
    disableAndUncheckedCheckboxs(allCheckboxs);
    $(elseCheckbox).prop({ disabled: false, checked: true });
}

function checkedChild(checkboxs){
    var x;    
    checkboxs.each(function(){
        if ($(this).prop( "checked" ))
            x= this;
    });
    return x;
}
function disableCheckboxs(checkboxs){
    checkboxs.each(function(){
        $(this).prop({ disabled: true });
    });
}
function disableAndUncheckedCheckboxs(checkboxs){
    checkboxs.each(function(){
        $(this).prop({ disabled: true, checked: false });
    });
}
function enableCheckboxs(checkboxs){
    checkboxs.each(function(){
        $(this).prop("disabled", false);
    });
}

---

更新：

我向客户端脚本端 (jQuery) 添加了一个初始化部分，以通过 javascript (jquery) 设置它们的默认状态。你可以一起做这个服务器端（php中的循环）+客户端（在jquery下面）以获得安全的结果；

你可以看到结果HERE

$( document ).ready(function() {
    //Initialising the tree nodes
    var $parentCheckbox =  $("input#parentChbox");
    var $childrenCheckboxs = $("#childList  input.childchbox");

    disableAndUncheckedCheckboxs($childrenCheckboxs);
    $parentCheckbox.prop({checked: true});    
});

................