Disable a specific checkbox using Javascript

Question

I would like to request assistance on how can I disable a specific checkbox.

Scenario:

If I clicked the 'Yes to all' checkbox - the other checkbox will be disabled (Q1 to Q4)
If I selected one or more on the Q1 to Q4 checkbox - 'Yes to all' checkbox will be disabled

Code:

$('input[type=checkbox]').change(function() {
  if ($(this).is(':checked')) {
    $('input[type=checkbox]').attr('disabled', true);
    $(this).attr('disabled', '');
  } else {
    $('input[type=checkbox]').attr('disabled', '');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1" />Q1
<input type="checkbox" name="Q2" value="2" />Q2
<input type="checkbox" name="Q3" value="3" />Q3
<input type="checkbox" name="Q4" value="4" />Q4

<input type="checkbox" name="QYTA" value="YTA" />Yes to all

I need to add an 'id' tag on the script to separate 'Q1-Q4' and 'Yes to all' checkbox given the scenario. — Harvey Linarez
– Harvey Linarez, Commented Apr 28, 2021 at 7:34
"I need to add an 'id' tag on the script" - sounds fine. What keeps you from doing exactly that? — Nico Haase
– Nico Haase, Commented Apr 28, 2021 at 8:43

Atul Rajput · Accepted Answer · 2021-04-28 07:48:52Z

You need to check weather the checkboxes selected or not as per your requirement, Condition 1: if question selected length is more than 1, then disable the YTA condition 2: if YTA is selected then disable all the Questions

If need anything else, please let me know.

$('.yta').change(function() {
if($('.yta:checked').length){
  $('.q').attr('disabled', true);
}else {
 $('.q').removeAttr("disabled");
}
});


$('.q').change(function() {
 if($('.q:checked').length){
  $('.yta').attr('disabled', true);
  }else {
  $('.yta').removeAttr("disabled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="q" type="checkbox" name="Q1" value="1" />Q1
<input class="q" type="checkbox" name="Q2" value="2" />Q2
<input class="q" type="checkbox" name="Q3" value="3" />Q3
<input class="q" type="checkbox" name="Q4" value="4" />Q4

<input class="yta" type="checkbox" name="QYTA" value="YTA" />Yes to all

yunzen · Accepted Answer · 2021-04-28 08:14:11Z

My answer with my philosophy:

Avoid jQuery if you can
Use small functions that do one thing
Have in mind that the same should work when used multiple times in a document
Prevent magic values in your code
Encapsulate as much as possible

So this seems like overkill, but this works

{
  function checkAnswers(qNames, allName) {
    const qSelector = qNames.map(e => `[name="${e}"]`).join(',')
    const allSelector = `[name="${allName}"]`
    const selector = `${qSelector},${allSelector}`;

    const getValue = () => Array.from(document.querySelectorAll(selector)).filter(e => e.checked).map(e => ({[e.name]: e.value}))
    const checkQ = value => value.map(e => Object.keys(e)[0]).filter(value => qNames.includes(value)).length > 0;
    const checkAll = value =>  value.map(e => Object.keys(e)[0]).includes(allName)

    const qDisable = () => Array.from(document.querySelectorAll(qSelector)).forEach(e => e.disabled = true)
    const qEnable = () => Array.from(document.querySelectorAll(qSelector)).forEach(e => e.disabled = false)

    const allDisable =() => document.querySelector(allSelector).disabled = true
    const allEnable = () => document.querySelector(allSelector).disabled = false    

    return e => {
      if (!e.target.closest(selector)) {return}

      const value = getValue();
      if (checkQ(value)) {
        allDisable();
      } else if (checkAll(value)) {
        qDisable()
      } else {
        allEnable();
        qEnable();
      }
    }
  }  

  
  let qNames = ['QA1','QA2','QA3','QA4']
  let allName = 'QAYTA'
  
  document.addEventListener('change', checkAnswers(qNames, allName))

  qNames = ['QB1','QB2','QB3','QB4']
  allName = 'QBYTA'
  
  document.addEventListener('change', checkAnswers(qNames, allName))
}

:disabled + label {
  color: lightgray;
}

<input type="checkbox" id="QA1" name="QA1" value="1"/><label for="QA1">Question 1</label><br>
<input type="checkbox" id="QA2" name="QA2" value="2"/><label for="QA2">Question 2</label><br>
<input type="checkbox" id="QA3" name="QA3" value="3"/><label for="QA3">Question 3</label><br>
<input type="checkbox" id="QA4" name="QA4" value="4"/><label for="QA4">Question 4</label><br>

<input type="checkbox" id="QAYTA" name="QAYTA" value="YTA"/><label for="QAYTA">Yes to all</label>


<br><br>
<input type="checkbox" id="QB1" name="QB1" value="1"/><label for="QB1">Question 1</label><br>
<input type="checkbox" id="QB2" name="QB2" value="2"/><label for="QB2">Question 2</label><br>
<input type="checkbox" id="QB3" name="QB3" value="3"/><label for="QB3">Question 3</label><br>
<input type="checkbox" id="QB4" name="QB4" value="4"/><label for="QB4">Question 4</label><br>

<input type="checkbox" id="QBYTA" name="QBYTA" value="YTA"/><label for="QBYTA">Yes to all</label>

Vaibhav Gattyani · Accepted Answer · 2021-04-28 07:43:10Z

0

You can do something like this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="q1_q4" type="checkbox" name="Q1" value="1"/>Q1
<input class="q1_q4" type="checkbox" name="Q2" value="2"/>Q2
<input class="q1_q4" type="checkbox" name="Q3" value="3"/>Q3
<input class="q1_q4" type="checkbox" name="Q4" value="4"/>Q4

<input class="yta" type="checkbox" name="QYTA" value="YTA"/>Yes to all

<script>

$(".q1_q4").on('change', function(){
  $(".yta").attr("disabled","disabled");
});

$(".yta").on('change', function(){
  $(".q1_q4").attr("disabled","disabled");
});

</script>

answered Apr 28, 2021 at 7:43

Vaibhav Gattyani

1908 bronze badges

2 Comments

Simone Rossaini Over a year ago

If the user uncheck the checkbox ??

Vaibhav Gattyani Over a year ago

@SimoneRossaini Do you mean, if user wants to uncheck the checkbox? I have only added the code according to the information given.

Rohit Tagadiya · Accepted Answer · 2021-04-28 07:47:11Z

0

See the perfect answer.

$('input[type=checkbox]').change(function() {
  if ($(this).is('input[name="QYTA"]')) {
    if ($(this).is(':checked')) {
      $('input[type=checkbox][name!="QYTA"]').attr('disabled', true);
    } else {
      $('input[type=checkbox][name!="QYTA"]').attr('disabled', false);
    }
  } else {
    if ($(this).is(':checked')) {
      $('input[type=checkbox][name="QYTA"]').attr('disabled', true);
    } else if($('input[type=checkbox][name!="QYTA"]:checked').length == 0) {
      $('input[type=checkbox][name="QYTA"]').attr('disabled', false);
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1" />Q1
<input type="checkbox" name="Q2" value="2" />Q2
<input type="checkbox" name="Q3" value="3" />Q3
<input type="checkbox" name="Q4" value="4" />Q4

<input type="checkbox" name="QYTA" value="YTA" />Yes to all

answered Apr 28, 2021 at 7:47

Rohit Tagadiya

3,7661 gold badge28 silver badges33 bronze badges

1 Comment

Rohit Tagadiya Over a year ago

My Answer is perfect as OP wants. still, someone has downvoted it. please don't do it if the answer is perfect.

avt613 · Accepted Answer · 2021-04-28 08:05:20Z

You can use the .prop function in jQuery to add and remove the disabled attribute easily. You would need to refine the selectors if you are using other checkboxes on the same page.

$('input[type=checkbox]').change(function() {
  if (this.name == "QYTA" && this.checked) {
    $('input[type=checkbox][name!="QYTA"]').prop("disabled", true);
  } else if (this.name != "QYTA" && this.checked) {
    $('input[type=checkbox][name="QYTA"]').prop("disabled", true);
  } else {
    $('input[type=checkbox]').prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1" />Q1
<input type="checkbox" name="Q2" value="2" />Q2
<input type="checkbox" name="Q3" value="3" />Q3
<input type="checkbox" name="Q4" value="4" />Q4

<input type="checkbox" name="QYTA" value="YTA" />Yes to all

The KNVB · Accepted Answer · 2021-04-28 08:57:19Z

0

My solution is to set up onchange event handler for each checkbox.

And then depending on the element which triggered the onchange event to perform a different operation.

if QYTA trigger the onchange then disable the Q1 to Q4 checkbox. Else disable the QYTA checkbox.

I make use of the logic difference between the checked and disabled attribute.

Here is my solution:

$("input[type='checkbox']").each(function() {
  $(this).on('change', function() {
    if (this.name=='QYTA'){
        for (let i=1;i<5;i++){
            $("input[type='checkbox'][name='Q"+i+"']").attr('disabled', this.checked);
        }
    } else{
        $("input[type='checkbox'][name='QYTA']").attr('disabled', this.checked);
    }   
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1"/>Q1
<input type="checkbox" name="Q2" value="2"/>Q2
<input type="checkbox" name="Q3" value="3"/>Q3
<input type="checkbox" name="Q4" value="4"/>Q4

<input type="checkbox" name="QYTA" value="YTA"/>Yes to all

edited Apr 28, 2021 at 8:57

answered Apr 28, 2021 at 8:42

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

1 Comment

Nico Haase Over a year ago

Please add an explanation to your answer such that others can learn from it

user12365590 · Accepted Answer · 2021-04-28 09:01:22Z

0

hope help u

$("input[type='checkbox']").each(function(){
            $(this).on('click', function(){
                var el = $("input[type='checkbox']").not($("input[name='QYTA']"));
                var elAl = $("input[name='QYTA']");
                if($(this).not(elAl).length == 0) {
                    if(elAl.is(':checked')){
                        el.attr('disabled',true);
                    } else {
                        $("input[type='checkbox']").removeAttr("disabled");
                    }
                } else if(el.is(':checked')){
                    elAl.attr('disabled',true);
                } else {
                    $("input[type='checkbox']").removeAttr("disabled");
                }
             
            });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1"/>Q1
        <input type="checkbox" name="Q2" value="2"/>Q2
        <input type="checkbox" name="Q3" value="3"/>Q3
        <input type="checkbox" name="Q4" value="4"/>Q4

        <input type="checkbox" name="QYTA" value="YTA"/>Yes to all

answered Apr 28, 2021 at 9:01

user12365590

1 Comment

Nico Haase Over a year ago

Please add an explanation to your answer such that others can learn from it

Collectives™ on Stack Overflow

Disable a specific checkbox using Javascript

7 Answers 7

Comments

Comments

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related