Checkbox not getting disabled using jquery

Question

I am facing a weird issue. I am not able to access the checkbox to be disabled using jquery. Here is the code snippet:

HTML

<td class="checkbox1 col5">
    <input type="checkBox" 
           class="checkbox {{contractorInfo.contractorID}}" 
           ng-click=" massUpdateMainCtrl.offboardContractor(contractorInfo,$index)" 
           id="{{$index}}" 
           ng-disabled="massUpdateMainCtrl.disableCheckBoxAlreadyAddedToMassUpdate({{contractorInfo.contractorID}})" 
           ng-checked="massUpdateMainCtrl.disableCheckBoxAlreadyAddedToMassUpdate({{contractorInfo.contractorID}})"> 
    <label for="{{$index}}"></label>
</td>

CSS

input[type=checkbox] {
   display: none;
}

.checkbox1 label {
    border: 1px solid #c0c0c0;
    height: 15px;
    width: 15px;
    max-width: 100%;
    margin-bottom: 0px;
    font-weight: bold;
    vertical-align: middle!important;
}

JQuery:

$(".checkbox").attr('disabled', 'disabled');

Problem here is I am not able to disable the checkbox using jquery.

Please help.

score 2 · Answer 1 · answered Nov 07 '16 at 13:16

2

Assuming you have jQuery > 1.6, then you must use .prop() instead of .attr()

$(".checkbox").prop('disabled', true);

As per http://api.jquery.com/attr/ : "To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

answered Nov 07 '16 at 13:16

ADyson

57,178
14
51
63

Tried using .prop but with no luck. – Suvojit Nov 07 '16 at 13:58
Can you post a JSFiddle with it not working please? I see no reason why it shouldn't, it's the standard way of doing this. – ADyson Nov 07 '16 at 14:26

score 1 · Answer 2 · answered Nov 07 '16 at 13:15

1

Try using 'prop' instead attr,

$(".checkbox").prop('disabled', true);

answered Nov 07 '16 at 13:15

Samir

1,312
1
10
16

Edited my ans, Sorry for mistake. – Samir Nov 07 '16 at 13:17

score 0 · Answer 3 · answered Nov 07 '16 at 13:20

0

You can use this attribute

ng-disabled="!d"

so, using javascript :

$(".checkbox").attr('ng-disabled', "!d");

answered Nov 07 '16 at 13:20

Nvan

1,126
16
23

score 0 · Answer 4 · answered Nov 07 '16 at 13:22

0

For jQuery 1.6+ use

Use the new .prop() function:

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

And for jQuery 1.5 and below use

$("input.group1").attr('disabled','disabled');

answered Nov 07 '16 at 13:22

harsh.jinx

1
1

score 0 · Answer 5 · answered Nov 07 '16 at 13:26

0

It seems you're using jquery and angular to control your interface, so I don't think it's a good idea, some people may not agree with my point of view, but I recommend that you use just one of these frameworks, in this case only angular. Try to use ng-disabled to accomplish what you want.

For further understanding visit: Angular docs

answered Nov 07 '16 at 13:26

M. A. Cordeiro

469
8
14

have used ng-disabled but my view refreshes with new data everytime so the ng-disabled doesnt works that time around. – Suvojit Nov 07 '16 at 13:59
Problem is that since I have a label for syntax for the checkboxes and have designed the checkbox diffrently with CSS and the original checkbox styled to display:none, I am unable to disable the new labelled checkbox using jquery – Suvojit Nov 07 '16 at 14:06

Checkbox not getting disabled using jquery

5 Answers5