Cant uncheck checkbox after adding this jQuery

Question

The code is supposed to disable a group of checkboxes. There are two classes of checkbox, if I click on one, it disables the other. The problem is if I change my mind and want to unchoose (uncheck), it does not allow me to uncheck.

$(".single-checkbox").click(function(){
      if ($(this).prop("checked", "checked")) {
          $('.deleteDone').prop('disabled', true);
     } else {
          // $(this).prop("unchecked", "unchecked")
          // $('.deleteDone').prop('disabled', false);      
          // $(".single-checkbox").prop("checked", false);
      }
});

I have tried various things in the else part of the statement but no luck. Would you have any ideas? There are a couple of questions on unchecking checkboxes and i tried variations in my code but no luck.

Any help appreciated.

score 4 · Accepted Answer · answered Jul 17 '15 at 11:38

4

You are setting the value instead of checking it in the if statement.

if ($(this).prop("checked", "checked")) {

Instead, you should check if the checkbox is checked.

if ($(this).is(":checked")) {

answered Jul 17 '15 at 11:38

Anonymous

11,748
6
35
57

1

Thank you, this did it, if i unchecked the other class remained disables so i did it like this and it unchecks and undisables. `$(".single-checkbox").click(function(){ if ($(this).is(":checked")) { $('.deleteDone').prop('disabled', true); } else { $('.deleteDone').prop('disabled', false); } }); ` – C Dog Jul 17 '15 at 12:37
No problem. Glad I could help. – Anonymous Jul 17 '15 at 13:02

score 2 · Answer 2 · answered Jul 17 '15 at 11:38

2

$(this).prop("checked", "checked") statement will set the value of property checked and as "checked" will evaluate to truthy it will always be checked.

These statements can be used,

if(this.checked) {
if($(this).is(":checked")){
if($(this).prop("checked")){

However you can use Script

$(".single-checkbox").change(function(){
    $('.deleteDone').prop('disabled', this.checked);
});

answered Jul 17 '15 at 11:38

Satpal

132,252
13
159
168

`$('.deleteDone').prop('disabled', this.checked);` will not the targeted input controls to be disables. The user agent should check whether the `disabled` attribute is present or not and it does not matter what value is assigned to it. So `disabled="false"` should yet be interpreted as disabled according to W3C spec. – Igwe Kalu Jul 17 '15 at 11:54
@IgweKalu, W3C spec are correct You are missing the point its setting the property not attribute value. See docs http://api.jquery.com/prop/#prop2 and also go through http://stackoverflow.com/questions/5874652/prop-vs-attr – Satpal Jul 17 '15 at 11:58
I just meant to point out that `$('.deleteDone').prop('disabled', this.checked);` will not toggle disable/enable the input control as I suspect you mean it to. – Igwe Kalu Jul 17 '15 at 12:09

Igwe Kalu · Answer 3 · 2015-07-17T11:49:05.540

1

$(this).prop("checked", "checked") ensures that the checkbox is always checked whenever it's clicked.

If you want to determine that a checkbox is checked, do this instead: if ($(this).prop("checked"))

Explaining the behaviour you observed in your code:

if ($(this).prop("checked", "checked")) {
    $('.deleteDone').prop('disabled', true);
}

$(this).prop("checked", "checked") returns an object, which is truthy. This means $('.deleteDone').prop('disabled', true); gets executed whatever the case may be. And this means the elements with class deleteDone always get disabled.

edited Jul 17 '15 at 11:49

answered Jul 17 '15 at 11:38

Igwe Kalu

14,286
2
29
39

thank you everyone for your help. the explanations were very helpful. – C Dog Jul 17 '15 at 12:39

Sachink · Answer 4 · 2015-07-17T11:45:12.363

0

I think after clicked on checkbox, the all checkbox will disabled bcoz class .deleteDone, therefor you not allow to click again. you need to disabled false for clicked checkbox

  $(".single-checkbox").click(function(){
          if ($(this).is(":checked")) {
            $('.deleteDone').prop('disabled', true);
            // Add this //
            $(this).removeAttr('disabled');
         } else {
            //$(this).prop("unchecked", "unchecked")
            //$('.deleteDone').prop('disabled', false);

            //$(".single-checkbox").prop("checked", false);
          }
    });

edited Jul 17 '15 at 11:45

answered Jul 17 '15 at 11:39

Sachink

1,425
10
22

why should `$(this).removeAttr('disabled');` be added? – Igwe Kalu Jul 17 '15 at 11:56
@IgweKalu .. Since no HTML is provided, I assumed all checkboxes to have `.deleteDone` class. If user checks any checkbox, it too will get disabled along others; so to prevent this `$(this).removeAttr('disabled');` was added – Sachink Jul 17 '15 at 12:15

score 0 · Answer 5 · answered Jul 17 '15 at 12:02

$('.single-checkbox, .deleteDone').click(function(){ // if you click any of the classes
    var isChecked = $(this).is(':checked'); // true or false

    if (isChecked) {
        var cbToDisable = $(this).attr('class') == 'single-checkbox' ? 'deleteDone' : 'single-checkbox'; // disable the other class
        $(cbToDisable).prop('disabled', isChecked); // do it
    }
});

Cant uncheck checkbox after adding this jQuery

5 Answers5