选中JQuery Checkbox验证

Posted 2021-04-02

我遇到了一个复选框验证问题，我一直在尝试使用复选框创建验证。

<script>
    $('document').ready(function(){
        let x = $('#TestChecks > input[type="checkbox"]').toArray();
        $('#TestChecks').change(function() {
            $('#TestChecks > input[type="checkbox"]').each((i,v) => {
                console.log($('#TestChecks > input[type="checkbox"]:checked').length)
                    if($(x[0]).is(':checked')){
                        if(i != 0) {
                            $(x[i]).attr('checked', false)
                            $(x[i]).attr('disabled', true)
                            console.log('checked')
                        }
                    } else {
                        if(i != 0 ) { 
                            $(x[i]).attr('checked', false)
                            $(x[i]).attr('disabled', false)
                            $(x[0]).attr('disabled', true)
                            $(x[1]).attr('checked', true)  
                            console.log('unchecked')
                        } else if ($('#TestChecks > input[type="checkbox"]:checked').length == 0) {
                            $(x[0]).attr('disabled', false)
                            $(x[0]).attr('checked', true)
                            console.log('alone')
                        } else {
                            $(x[0]).attr('disabled', false)
                            $(x[0]).attr('checked', true)
                        } 
                    }
            });
        }).trigger('change');
    });
</script>

<div id="TestChecks">
    <input type="checkbox" id="test1" value="test1"/>
    <input type="checkbox" id="test2" value="test2"/>
    <input type="checkbox" id="test3" value="test3"/>
</div>

---

1 - 我需要在选择数组中的第一个复选框时创建验证，禁用其余复选框。 checkboxes first checked

2 - 当取消选中第一个复选框时，我需要启用其余复选框并选择第二个复选框。 checkbox 1 disabled 2 enabled

3 - 当没有选择任何内容时，我需要检查第一个复选框并禁用其他复选框，如第一次验证中所示

---

欢迎任何帮助，谢谢

答案

这样的事情??? html

 <div id="TestChecks">
    <input type="checkbox" class="pinus" id="test1" value="test1"/>
    <input type="checkbox" class="pinus" id="test2" value="test2"/>
    <input type="checkbox" class="pinus" id="test3" value="test3"/>
 </div>

JS

$('input:checkbox.pinus').on('change', function() {
    switch($(this).attr('id')) {
            case "test1":
                  if(this.checked){
                    $("#test3").attr("disabled",true);
                    $("#test2").attr("disabled",true);
                  }else{
                    $(this).attr("disabled",true);
                    $("#test3").attr("disabled",false);
                    $("#test2").attr("disabled",false); 

                  }
                  break;
            case "test2":
                 if(!this.checked){
                      $(this).attr("disabled",false);
                      $("#test3").attr("disabled",false);
                      $("#test1").attr("disabled",false);
                      $("#test1").prop("checked",true);
                 }
                break;
           case "test3":
                 if(!this.checked){
                  $(this).attr("disabled",false);
                  $("#test2").attr("disabled",false);
                  $("#test1").attr("disabled",false);
                  $("#test1").prop("checked",true);
                  }
                 break;
    }
 });

codepen

另一答案

HTML

<div id="TestChecks">
    <input type="checkbox" id="test1" value="test1" checked/>
    <input type="checkbox" id="test2" value="test2" disabled/>
    <input type="checkbox" id="test3" value="test3" disabled/>
</div>

JS

$(document).ready(function(){

    $("#test1").on("change",function(){
    if(!this.checked){
    $(this).attr("disabled",true);
    $("#test3").attr("disabled",false);
    $("#test2").attr("disabled",false).attr("checked",true);
    }
    });
});

这是一个fiddle

请让我知道这对你有没有用。