Disable others on select

JavaScript
1

hi peeps how we doing, i have a issue with this javascript, when i click on the third one all disable when i click on the 2nd one only the third one disable and wen i click on the first one none disable

am trying to make other disable when i click on one, thank you.

<input type="checkbox" id="checkbox1" value="checkbox1" onchange="checker()" />
<input type="checkbox" id="checkbox2" value="checkbox2" onchange="checker()" />
<input type="checkbox" id="checkbox3" value="checkbox3" onchange="checker()" />



<script type="text/javascript">

function checker() {
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');
    var checkbox3 = document.getElementById('checkbox3');

    checkbox2.disabled = checkbox3.disabled = checkbox1.checked; 
    
           
}

</script>
2

So what should happen when I first click the first one and then the third one? You say the first one should be disabled then, but may it stay checked or should be unchecked as well at that point?

Also, can you explain why you want this? It sounds rather complicated and maybe there are better solutions.

3

Hi there skyhighweb,

is there any reason why you cannot use something like this instead…

<form action="#">

<label for="r1">appropriate text here:</label>
<input id="r1" type="radio" name="appropriateName" value="radio 1 value"><br>

<label for="r2">appropriate text here:</label>
<input id="r2" type="radio" name="appropriateName" value="radio 2 value"><br>

<label for="r3">appropriate text here:</label>
<input id="r3" type="radio" name="appropriateName" value="radio 3 value"  required>

</form>

coothead

2 Likes
4

If option 3 is required you can never select either option 1 or 2. So actually there is no choice at all :slight_smile:

5

hi, i just want if i select any one the other two disables thats what am aiming at

6

i need to make use of the name=“” for something else to submit a value thats why i cant use that code

7

Can you elucidate?

coothead

8

That’s exactly the behavior you get with input type=“radio” without needing any Javascript. So I would say use that instead as it’s a lot easier plus people expect the behaviour.

9

Radio is definitely what you’re trying to do, and you should use it.

If you absolutely insist on a checkbox/JS solution, disable all the boxes, and then enable the one that triggered the event (this)

10

ok got it

11

You might specify the IDs of the checkboxes to disable in a data-* attribute then, for example as a space-separated list like so:

<label>
  foo
  <input type="checkbox" id="checkbox-1">
</label>

<label>
  bar
  <input type="checkbox" id="checkbox-2" data-disable="checkbox-3">
</label>

<label>
  baz
  <input type="checkbox" id="checkbox-3" data-disable="checkbox-1 checkbox-2">
</label>

var toggleBoxes = document.querySelectorAll('[data-disable]')

var toggleOthers = function (event) {
  var target = event.target
  
  target.dataset.disable.split(' ').forEach(function (id) {
    document.getElementById(id).disabled = target.checked
  })
}

toggleBoxes.forEach(function (checkbox) {
  checkbox.addEventListener('change', toggleOthers)
})

Depending on where this information is coming from, you might also use a plain object as a dictionary instead:

var checkboxes = document.querySelectorAll('[type="checkbox"]')

var disable = {
  'checkbox-2': ['checkbox-3'],
  'checkbox-3': ['checkbox-1', 'checkbox-2']
}

var toggleOthers = function (event) {
  var target = event.target
  
  disable[target.id].forEach(function (id) {
    document.getElementById(id).disabled = target.checked
  })
}

checkboxes.forEach(function (checkbox) {
  if (checkbox.id in disable) {
    checkbox.addEventListener('change', toggleOthers)
  }
})
12

cool thanks alot bro

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.