Home>

I want to rewrite the disabled attribute of the button tag by removing required from the unselected checkbox after selecting even one checkbox.
Use jQuery1.11.1
I want to support IE11
(Operation with browsers other than IE has been confirmed)

go

JQuery
var checkedsum;
$('. question'). on ("click", function () {
checkedsum = $('. question: checked'). length;
    if (checkedsum>0) {
// the following sentence
    $('input [type = checkbox]'). not (': checked'). prop ('required', false);
        $('form [data-validate]'). on ('input', function () {
            $(this) .find ('# next'). prop ('disabled',! this.checkValidity ());
        });
    } else {
    $('. question'). prop ("required", true);
    }
});
HTML
<form method = "get" name = "pointform" data-validate>
                
                    
                        <input type = "checkbox" name = "point" value = "aa" required><label for = "m1"></label>
                    
                    
                        <input type = "checkbox" name = "point" value = "ss" required><label for = "m2"></label>
                    
                
                
                    
                        <input type = "checkbox" name = "point" value = "dd" required><label for = "m3"></label>
                    
                    
                        <input type = "checkbox" name = "point" value = "ff" required><label for = "m4"></label>
                    
                
                
                    
                        <input type = "checkbox" name = "point" value = "gg" required><label for = "m5"></label>
                    
                    
                        
                                <input type = "checkbox" name = "point" value = "hh" required><label for = "m6"></label>
                        
                    
                
                
                      
                    <input type = "button" value = "Next" onclick = "puff ()" disabled = "disabled">
                     
                
            </form>
  • Answer # 1

    $(function () {
      $('[name = point]'). on ('change', function () {
        var flg = $('[name = point]: checked'). length == 0;
        $('[name = point]'). prop ('required', flg);
        $('# next'). prop ('disabled', flg);
      });
    });