选中时的 JQuery 复选框验证答案

【问题标题】：JQuery Checkbox validation on checked选中时的 JQuery 复选框验证
【发布时间】：2018-09-28 04:39:29
【问题描述】：

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

<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 - 当没有选择任何内容时，我需要检查第一个复选框并禁用其余复选框，就像在第一次验证中一样

欢迎任何帮助，谢谢

【问题讨论】：

在您的第二个屏幕截图中，当第二个复选框被选中时，第一个复选框被禁用？
是 1 - 当第一个被启用时，其余的应该被禁用 2 - 当第一个点击被取消选中时，它应该禁用第一个复选框并启用第二个 3 - 当没有任何选择时，选中第一个复选框并像第一次验证一样禁用其余的复选框
规则 3 很宽泛。你怎么能说没有被选中？ 60 秒内什么都没有选择？您需要指定何时检查第一个 cb 并禁用其余的
如果选中第二个和第三个复选框会怎样？
#3 冲突 #2

标签： jquery validation checkbox checked

【解决方案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>

$('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

【讨论】：

【解决方案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

让我知道它是否适合你。

【讨论】：