CODEWITHSUNDEEP
javascripthtmljquery
Harvey Linarez
Harvey Linarez

Reputation: 53

Disable a specific checkbox using Javascript

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

Scenario:

  1. If I clicked the 'Yes to all' checkbox - the other checkbox will be disabled (Q1 to Q4)
  2. 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

Upvotes: 0

Views: 4634

Answers (7)

user12365590
user12365590

Reputation:

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

Upvotes: 0

The KNVB
The KNVB

Reputation: 3844

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

Upvotes: 0

yunzen
yunzen

Reputation: 33449

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>

Upvotes: 2

avt613
avt613

Reputation: 309

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

Upvotes: 0

Atul Rajput
Atul Rajput

Reputation: 4178

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

Upvotes: 2

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3738

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

Upvotes: 0

Vaibhav Gattyani
Vaibhav Gattyani

Reputation: 190

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>

Upvotes: 0

Related Questions