How do this? If Checkbox is Disabled and Checked, It should always be disabled

Question

I am working on Time Scheduling Calendar, At some point I need to put condition as if checkbox is checked and disabled, it would be always disable. So user can't uncheck it. For it, I had put following Condition. But it is not working.

if($(this).is(':checked') && $(this).is(':disabled')){
   $(this).attr("disabled", true);
}

This is the Code where I'm working.. [for more clear Idea about what i'm asking]

$('input[type="checkbox"]').on('change', function() {
  $(this).parent('label').nextAll('label').first().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
 
$(this).parent('label').nextAll('label').first().find('input[type="checkbox"]').attr("disabled", $(this).is(':checked'));

$(this).parent('label').prevAll('label').first().find('input[type="checkbox"]').attr("disabled", $(this).is(':checked'));

 a= $(this).parent('label').prevAll('label').first().find('input[type="checkbox"]');
  
if(a.is(':checked')){
 a.attr("disabled",true);
}


if($(this).is(':checked')){ $(this).parent('label').prevAll('label').first().find('input[type="checkbox"]').attr("disabled", true);
}

if($(this).is(':checked') && $(this).is(':disabled')){
$(this).attr("disabled", true);
}


 


  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="one" value="a"> 08:00</label><br/>
<label><input type="checkbox" name="one" value="b"> 08:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:00</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 10:00</label><br/>
<label><input type="checkbox" name="one" value="f"> 10:30</label><br/>
<label><input type="checkbox" name="one" value="g" disabled> 11:00</label><br/>

Do Check 10:30
and 10:30 and 11:00 will checked and 10:00 disabled

Do Check 09:30
and 09:30 and 10:00 will check and 09:00 disabled

Do Uncheck 09:30
and 09:30 and 10:00 will Uncheck and 10:00 enbled, but 10:00 should be disabled

yvoytovych · Accepted Answer · 2017-07-11T13:59:53.757

If i understood it correctly, this may help you. Although, you need to describe full algorithm, and how it should work, in order to think of some implementation. Currently, you have described only one case.

$('input[type="checkbox"]').on('change', function() {
      var $parent = $(this).parent('label');
      var $next = $parent.nextAll('label').first();
      var $prev = $parent.prevAll('label').first();
      if(!$parent.nextAll('label').slice(1,2).find('input[type="checkbox"]').is(':checked')){
          $next.find('input[type="checkbox"]').attr("disabled", $(this).is(':checked'));
      }
      $next.find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
      $prev.find('input[type="checkbox"]:not(:checked)').attr("disabled", $(this).is(':checked')); 

                    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="one" value="a"> 08:00</label><br/>
<label><input type="checkbox" name="one" value="b"> 08:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:00</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 10:00</label><br/>
<label><input type="checkbox" name="one" value="f"> 10:30</label><br/>
<label><input type="checkbox" name="one" value="g" disabled> 11:00</label><br/>

Yup, it working, Now another problem Stuck...while check unchecking in loop towards up.. these checkboxes gone disabled... — Dhruvang Gajjar, Jul 11 '17 at 13:10

score 1 · Answer 2 · edited Jul 11 '17 at 12:47

1

Try preventing the click event:

$(this).on('click', function(e) {
    if($(this).is(':checked') && $(this).is(':disabled')) {
        return false;
    }
})

Also, I would heavily recommend shortening your jQuery, like so:

var $thisNext = $(this).parent('label').nextAll('label').first().find('input[type="checkbox"]')
var $thisPrev = $(this).parent('label').prevAll('label').first().find('input[type="checkbox"]')

So you can use

$thisNext.prop('checked', $(this).is(':checked'));

Instead of

$(this).parent('label').nextAll('label').first().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));

It makes your code a lot easier to read and maintain.

edited Jul 11 '17 at 12:47

Marco Luzzara

5,540
3
16
42

answered Jul 11 '17 at 12:18

Jeffrey Roosendaal

6,872
8
37
55

Actually that checkbox is already disable, that means is has already disabled click event. and that checkbox is enabled from another checkbox – Dhruvang Gajjar Jul 11 '17 at 12:20
Appreciate your recommendation... :) – Dhruvang Gajjar Jul 11 '17 at 12:22
This code prevents *any* action following a click, which means, you can't uncheck it for example. – Jeffrey Roosendaal Jul 11 '17 at 12:22
`return false` calls `e.preventDefault()` automatically, I think. – Marco Luzzara Jul 11 '17 at 12:25
Let me Explain, Check 10:30 10:30 and 11:00 will check and 10:00 disabled Check 09:30 09:30 and 10:00 will check and 09:00 disabled Uncheck 09:30 09:30 and 10:00 will Uncheck and 10:00 enbled, but 10:00 should be disabled – Dhruvang Gajjar Jul 11 '17 at 12:26
@MarcoLuzzara You're right, I just looked it up. See: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Jeffrey Roosendaal Jul 11 '17 at 12:31
@JeffreyRoosendaal Please Check Edits, Hope You understand – Dhruvang Gajjar Jul 11 '17 at 12:39
@Dhruvang I now sort of understand, but it's still hard to help you with this. You should check out [jQuery .eq()](https://api.jquery.com/eq/), so you can get the index of the current element, and select previous and next elements a lot easier. – Jeffrey Roosendaal Jul 11 '17 at 12:52

How do this? If Checkbox is Disabled and Checked, It should always be disabled

2 Answers2