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

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...

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...

Share Improve this question edited Aug 29, 2020 at 18:02 Brian Tompsett - 汤莱恩 5,88372 gold badges61 silver badges133 bronze badges asked Dec 13, 2010 at 7:04 OM The Eternity 16.2k44 gold badges125 silver badges187 bronze badges

4 maybe consider using radio buttons ? – yurib Commented Dec 13, 2010 at 7:11
2 Probably,you need RADIO boxes – Shakti Singh Commented Dec 13, 2010 at 7:12
Shakti and Yurib.. U just busted me.. :) – OM The Eternity Commented Dec 13, 2010 at 7:15
Unless you have other issues, things like this can be done very easily using one of the popular JavaScript libraries. – dheerosaur Commented Dec 13, 2010 at 7:22
@dheerosaur can you please mention one of those libraries. – LonelySoul Commented Jan 21, 2022 at 15:19

Add a comment |

5 Answers 5

Sorted by: Reset to default 7

You could do

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

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

Try the demo

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

 <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>

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

Try code like this

 <script>
            function uncheck(){
                for(var ii=1; ii<=4; ii++){
                    if(document.getElementById("q6_"+ii).checked==true){
                       document.getElementById("q6_"+ii).checked=false;
                    }
                }
            }
        </script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to disable other checkbox on click of one check box? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)