only checkbox to be checked at a time

Question

Guys I have 2 checkbox and when one checkbox is checked the other has to be disabled and again if unchecked both checkbox has to be enabled (only onecheck box can be clicked at a time). I cannot use a radio button and checkboxes name/id cannot be similar. I will greatly appreciate if you guys can help. pure javascript. thx

function change(type){
    var checked = document.getElementById(type.id);
    var wan=document.getElementsByName('test');
    var ven = document.getElementsByName('testing');
    
         
    
    if (checked.checked) {
     if(wan){
     document.getElementById('testing').disabled =true;
     document.getElementById('test').disabled =false;

     }
     if(ven){
  document.getElementById('testing').value = 2;
  document.getElementById('test').disabled =true;
     document.getElementById('testing').disabled =false;

     }
     }

<input type="checkbox" id="test" name="test" onclick="change(this)"/>test
<input type="checkbox" id="testing" name="testing" onclick="change(this)"/>testing

*I cannot use a radio button and checkboxes name/id cannot be similar.* So, you can't use HTML the right way? What kind of requirement is that? — Scott Marcus, Oct 28 '18 at 01:25
If one checkbox is checked then the unchecked checkbox is disabled? If it's disabled how is it to be checked? Is this a way to ensure user has no way of changing his/her choice once it's made? Or does the checked checkbox need to be unchecked so that both are enabled? — zer00ne, Oct 28 '18 at 01:49

score 0 · Accepted Answer · answered Oct 28 '18 at 01:34

Here is a working example:

<!DOCTYPE html>
<html>
<script type="text/javascript">

function change(){
    var wan = document.getElementById('test');
    var ven = document.getElementById('testing');
    
         
    
    if (wan.checked) {
     document.getElementById('testing').disabled= true;
     document.getElementById('test').disabled= false;

    }else if (ven.checked){
  document.getElementById('testing').value = 2;
  document.getElementById('test').disabled =true;
     document.getElementById('testing').disabled =false;
 }
 else {
  document.getElementById('testing').disabled= false;
  document.getElementById('test').disabled =false;
 }
 }
</script>

<body>
 
<input type="checkbox" id="test" name="test" onClick="change()"/>test
<input type="checkbox" id="testing" name="testing" onClick="change()"/>testing
</body>

</html>

man you are a life saver, thank you very much. I tried to upvote this answer but i dont have enough reputation. ur is the right answer. thank u very much and god bless u — Mahesh Mishra, Oct 28 '18 at 01:43

score 0 · Answer 2 · answered Oct 28 '18 at 01:45

See comments inline below:

// Get both checkboxes into an Array
let boxes = Array.prototype.slice.call(document.querySelectorAll("input.chk"));

// Loop over the boxes
boxes.forEach(function(box){    

  // Set up event handler
  box.addEventListener("click", function(){

    // If the currently clicked box is checked
    if(box.checked){
      // Loop over the boxes again
      boxes.forEach(function(cb){
        // Disable the box if it's not the current box
        if(cb !== box){
          cb.setAttribute("disabled", "disabled");
        }
      });    
    } else {
      // Loop over boxes again
      boxes.forEach(function(b){
        b.removeAttribute("disabled");  // Enable the box
      });
    }
  });
});

<input type="checkbox" class="chk" name="test">test
<input type="checkbox" class="chk" name="testing">testing

score 0 · Answer 3 · answered Oct 28 '18 at 01:46

you should radio button for this it would be better anyway if it can help

Checkbox2: <input type="checkbox" id="myCheck2"  onclick="myFunction2()">
Checkbox1: <input type="checkbox" id="myCheck1"  onclick="myFunction1()">

<script>
function myFunction2() {
    var checkBox1 = document.getElementById("myCheck1");    
    var checkBox2 = document.getElementById("myCheck2");
     if (checkBox2.checked == true){
        checkBox1.checked = false
    } 
}
function myFunction1() {
    var checkBox1 = document.getElementById("myCheck1");    
    var checkBox2 = document.getElementById("myCheck2");
    if (checkBox1.checked == true){
        checkBox2.checked = false
    }
}
</script>

gman · Answer 4 · 2018-10-28T01:53:54.737

It's easier if you use either a common class or some dataset element. You can just just ask the browser to give you all of them using document.querySelectorAll. You can then use any CSS selector

function checkOneOfGroup(selector, checkedId) {
  document.querySelectorAll(selector).forEach((element) => {
    element.checked = element.id === checkedId;
  });
}

const selector = "input[type=checkbox].group1"; 

function handleChange(element) {
  checkOneOfGroup(selector, element.target.id);
}

document.querySelectorAll(selector).forEach((element) => {
  element.addEventListener('change', handleChange);
});

checkOneOfGroup(selector, 'apple'); // start with apple checked

<input type="checkbox" class="group1" id="orange"><label for="orange">orange</label>
<input type="checkbox" class="group1" id="apple"><label for="apple">apple</label>
<input type="checkbox" class="group1" id="banana"><label for="banana">banana</label>
<input type="checkbox" class="group1" id="pear"><label for="pear">pear</label>
<input type="checkbox" class="group1" id="peach"><label for="peach">peach</label>

using a dataset element instead

function checkOneOfGroup(selector, checkedId) {
  document.querySelectorAll(selector).forEach((element) => {
    element.checked = element.id === checkedId;
  });
}

const selector = "input[type=checkbox][data-foo=group1]"; 

function handleChange(element) {
  checkOneOfGroup(selector, element.target.id);
}

document.querySelectorAll(selector).forEach((element) => {
  element.addEventListener('change', handleChange);
});

checkOneOfGroup(selector, 'apple'); // start with apple checked

<input type="checkbox" data-foo="group1" id="orange"><label for="orange">orange</label>
<input type="checkbox" data-foo="group1" id="apple"><label for="apple">apple</label>
<input type="checkbox" data-foo="group1" id="banana"><label for="banana">banana</label>
<input type="checkbox" data-foo="group1" id="pear"><label for="pear">pear</label>
<input type="checkbox" data-foo="group1" id="peach"><label for="peach">peach</label>

You could also just surround them in some other element and use that as a selctor

function checkOneOfGroup(selector, checkedId) {
  document.querySelectorAll(selector).forEach((element) => {
    element.checked = element.id === checkedId;
  });
}

const selector = "#fruits input[type=checkbox]"; 

function handleChange(element) {
  checkOneOfGroup(selector, element.target.id);
}

document.querySelectorAll(selector).forEach((element) => {
  element.addEventListener('change', handleChange);
});

checkOneOfGroup(selector, 'apple'); // start with apple checked

<div id="fruits">
 <input type="checkbox" id="orange"><label for="orange">orange</label>
 <input type="checkbox" id="apple"><label for="apple">apple</label>
 <input type="checkbox" id="banana"><label for="banana">banana</label>
 <input type="checkbox" id="pear"><label for="pear">pear</label>
 <input type="checkbox" id="peach"><label for="peach">peach</label>
</div>

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

HTMLFormControlsCollection API

The HFCC API allows us to access <form>s and all of their form controls with a terse and simple syntax:

Collect all <form>s in a page: var FORM = document.forms
Collect all form controls of a <form>: var FC = FORM.elements
Reference a form control by #id or [name]: var CHK = FC.nameOfInput

Demo

var sw = document.forms[0];
var ui = sw.elements;
var yin = ui.yin;
var yng = ui.yang;

sw.onchange = flip;

function flip(e) {
  var tgt = e.target;
  if (tgt.id === 'yin' && tgt.checked) {
    tgt.disabled = false;
    yng.disabled = true;
  } else if (tgt.id === 'yang' && tgt.checked) {
    tgt.disabled = false;
    yin.disabled = true;
  } else if (!tgt.checked) {
    yin.disabled = false;
    yng.disabled = false;
  } else {
    return false;
  }
}

html {
  font: 400 16px/1.5 "Ceviche One";
}

body {
  font-size: 1rem;
  background: #900;
}

form {
  font: inherit;
  font-size: 2rem
}

[type=checkbox] {
  display: none
}

label {
  display: inline-block;
  cursor: pointer;
  padding: 0px 2px;
  width: 60px;
  text-align: center;
  line-height: 1.2;
}

[name=yin]+label {
  border: 3px double #fff;
  color: #fff;
  background: #000;
}

[name=yang]+label {
  border: 3px double #000;
  color: #000;
  background: #fff;
}

input[type=checkbox]:disabled+label {
  border-color: #aaa;
  color: #aaa;
  background: #666;
}

input[type=checkbox]:checked+label {
  border: 3px double #980;
  color: #f00;
  background: none;
}

.symbol {
  font-size: 3rem;
  width: fit-content;
  line-height: 2.5rem;
  background: #fff;
  border-radius: 30%;
  vertical-align: sub;
  padding: 6px 0px 0px 0px;
}

<link href="https://fonts.googleapis.com/css?family=Ceviche+One" rel="stylesheet">

<form id='switch'>
  <input type="checkbox" id="yin" name="yin" value='0' />
  <label for='yin'>Yin</label>
  <label class='symbol'>&#9775;</label>
  <input type="checkbox" id="yang" name="yang" value='1' />
  <label for='yang'>Yang</label>
</form>

score -1 · Answer 6 · answered Oct 28 '18 at 01:27

-1

A similar question has already been asked, here html select only one checkbox in a group

By the way, using radio buttons would be better in my opinion, since it already does what you want to do.

Hope it helps!

answered Oct 28 '18 at 01:27

danibrum

459
8
21

I am not using jquery – Mahesh Mishra Oct 28 '18 at 01:29
If you scroll down there'll be some solutions in pure Javascript as you want. – danibrum Oct 28 '18 at 01:36
1

This should be a comment, not an answer. – Scott Marcus Oct 28 '18 at 01:46

only checkbox to be checked at a time

6 Answers6

HTMLFormControlsCollection API

Demo