How do I disable and re-enable a submit type button with a slider style checkbox?

I’m currently having some issue to figure how to disable and enable a submit type button with a slider checkbox.

This my script JS for switching mode of the button

This is an extract of the html part
And finally, here is the CSS part for the button and slider

    /* Button CSS */
    .valider{
       float: right;
       padding: 12px 20px;
       margin-top: 1%;
       cursor: pointer;
       border: 2px solid white;
       border-radius: 4px;
       color: white;
       background-color: #24c238;
    }

    .valider:hover{
       border: 2px solid #24c238;
       color: #24c238;
       background-color: white;
    }

    .valider:disabled{
       cursor: default;
       border-color: #999;
       color: #999;
       background-color: #4d7d52;
    }

    /* Slider CSS */
    .switch {
       position: relative;
       display: inline-block;
       width: 50px;
       height: 10px;
    }

    .switch input {
       opacity: 0;
       width: 0;
       height: 0;
    }

    .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       -webkit-transition: .4s;
       transition: .4s;
    }

    .slider:before {
       position: absolute;
       content: "";
       height: 26px;
       width: 26px;
       left: 4px;
       bottom: 4px;
       background-color: white;
       -webkit-transition: .4s;
       transition: .4s;
    }

    input:checked + .slider {
       background-color: #24c238;
    }

    input:focus + .slider {
       box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
       -webkit-transform: translateX(26px);
       -ms-transform: translateX(26px);
       transform: translateX(26px);
    }


/* language: lang-html */

    <script>
    function check() {
        var ele = document.getElementsById('check');
        var flag = 0;
    
        for (var i = 0; i < ele.length; i ++) {
            if (ele[i].checked) {
                flag = 1;
            }
        }
    
        if (flag === 1) {
            document.getElementByClass('valider').disabled = "enabled";
        } else {
            document.getElementByClass('valider').disabled = "disabled";
        }
    } 
    </script>

But nothing works, I managed easily to disable initially the button, but I didn’t success to enable it back.

Have any advice to help me to figure it out ?
(Sorry about my rough English)

85 thoughts on “How do I disable and re-enable a submit type button with a slider style checkbox?”

Leave a Comment