Question

我遇到了一个复选框验证问题，我一直试图通过复选框创建验证。

<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 - 如果没有选择任何内容，我需要检查第一个复选框并禁用其他复选框，如第一次验证中所示

欢迎任何帮助，谢谢

Answer 1

像这样的某些人？的 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

Answer 2

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

让我知道它是否适合你。

选中JQuery Checkbox验证

2 个答案:

HTML

JS