How to disable other checkbox on click of one check box?

javascript checkbox dom-events

30,312

Solution 1

<script type="text/javascript">
for (i=0; i<document.test.finallevelusers.length; i++){
if (document.test.finallevelusers[i].checked !=true)
  document.test.finallevelusers[i].disabled='true';
}
</script>

probably you want them enabled again when user uncheck the checkbox

for (i=0; i<document.test.finallevelusers.length; i++){
    if (document.test.finallevelusers[i].disabled ==true)
      document.test.finallevelusers[i].disabled='false';
    }

Solution 2

You could do

$('input').attr('disabled',true);

...if you really need it. But you might be better off using radio buttons.

Try the demo

Solution 3

 <script type="text/javascript">
    function disableHandler (form, inputName) {
    var inputs = form.elements[inputName];
    for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    input.onclick = function (evt) {
    if (this.checked) {
    disableInputs(this, inputs);
    }
    else {
    enableInputs(this, inputs);
    }
    return true;
    };
    }
    }

    function disableInputs (input, inputs) {
    for (var i = 0; i < inputs.length; i++) {
    var currentInput = inputs[i];
    if (currentInput != input) {
    currentInput.disabled = true;
    }
    }
    }

    function enableInputs (input, inputs) {
    for (var i = 0; i < inputs.length; i++) {
    var currentInput = inputs[i];
    if (currentInput != input) {
    currentInput.disabled = false;
    }
    }
    }
    </script>
    </head>
    <body>
    <form name="aForm" action="">
    <p>
    <label>
    <input type="checkbox" name="finallevelusers[]" value="1">
    </label>
    <label>

    <input type="checkbox" name="finallevelusers[]" value="1">
    </label>
    <label>

    <input type="checkbox" name="finallevelusers[]" value="1">
    </label>
    </p>
    </form>
    <script type="text/javascript">
    disableHandler(document.forms.aForm, 'finallevelusers[]');
    </script>

Solution 4

Hope This solution helps you-

your DOM could be something like this :

    <div class="checkboxes">
        <input type="checkbox" name="sameCheck" class="checkbox" id="1" onchange="checkChange()">
        <input type="checkbox" name="sameCheck" class="checkbox" id="2" onchange="checkChange()">
        <input type="checkbox" name="sameCheck" class="checkbox" id="3" onchange="checkChange()">
        <input type="checkbox" name="sameCheck" class="checkbox" id="4" onchange="checkChange()">
    </div>

And your logic is this :

   let checkbox = document.querySelectorAll('.checkbox')
   let b = false;
   function checkChange(){
     b = !b
     if(b){
        for(let i = 0 ; i< checkbox.length; i++){
            if(checkbox[i].checked === false){
                checkbox[i].disabled = 'true';
            }  
        }
     }else{
        for(let i = 0 ; i< checkbox.length; i++){
            checkbox[i].removeAttribute('disabled');
        }
        
     }
  }

View more solutions

30,312

Author by

OM The Eternity

M a PHP Programmer.. And an Experienced Tester, And a Vocalist...

Updated on December 08, 2021

Comments

OM The Eternity over 2 years

I have a group of check boxes with same name, what I need is when I click any one of them, other checkboxes must get disabled. how should I apply Javascript over it?

<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>

Please help...