JQuery Checkbox validation on checked

Question

I got an issue with a checkbox validation, I've been trying to much to create a validation with the checkboxes.

<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 - I need to create a validation when the first checkbox in the array is selected, disable the rest of the checkboxes like this. checkboxes first checked

2 - And when the first checkbox is unchecked, I need to enable the rest of the checkboxes and select the second one like this. checkbox 1 disabled 2 enabled

3 - And when there's nothing selected I need to check the first checkbox and disable the rest of the checkboxes like in the first validation

any help is welcome, thanks

On your second screenshot, the first checkbox is disabled when the second one is checked? — Eddie
– Eddie, Commented Apr 18, 2018 at 4:32
Yes 1 - When the first is enabled the rest should be disabled 2 - When the first get a click to be unchecked, it should disable the firts checkbox and enable the second one 3 - When there's nothing selected, check the fist checkbox and disable the rest like in the first validation — Gámez
– Gámez, Commented Apr 18, 2018 at 4:36
The rule 3 is broad. How can you tell nothing is selected? Nothing is selected in 60seconds? You need to specify when will the first cb be checked and disable the rest — Eddie
– Eddie, Commented Apr 18, 2018 at 4:56

Miguel Pineda · Accepted Answer · 2018-04-18 22:36:16Z

someting like this??? 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

Smit Raval · Accepted Answer · 2018-04-18 05:30:09Z

0

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);
    }
    });
});

Here is a fiddle

Let me know if it works for you.

answered Apr 18, 2018 at 5:30

Smit Raval

3,5161 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

JQuery Checkbox validation on checked

2 Answers 2

Comments

HTML

JS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

HTML

JS

Comments

Your Answer

Sign up or log in

Post as a guest

Related