CODEWITHSUNDEEP
jquerycheckbox
Dhruvang Gajjar
Dhruvang Gajjar

Reputation: 598

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

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

Upvotes: 2

Views: 966

Answers (2)

yvoytovych
yvoytovych

Reputation: 871

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/>

Upvotes: 2

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7157

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.

Upvotes: 1

Related Questions