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.

ADyson · Accepted Answer · 2016-11-07 13:16:28Z

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 7, 2016 at 13:16

ADyson

62.9k16 gold badges86 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suvojit Over a year ago

Tried using .prop but with no luck.

ADyson Over a year ago

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.

Samir · Accepted Answer · 2016-11-07 13:15:29Z

1

Try using 'prop' instead attr,

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

answered Nov 7, 2016 at 13:15

Samir

1,3681 gold badge10 silver badges16 bronze badges

1 Comment

Samir Over a year ago

Edited my ans, Sorry for mistake.

Nvan · Accepted Answer · 2016-11-07 13:20:11Z

0

You can use this attribute

ng-disabled="!d"

so, using javascript :

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

answered Nov 7, 2016 at 13:20

Nvan

1,14616 silver badges24 bronze badges

Comments

harsh.jinx · Accepted Answer · 2016-11-07 13:22:53Z

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 7, 2016 at 13:22

harsh.jinx

11 bronze badge

Comments

M. A. Cordeiro · Accepted Answer · 2016-11-07 13:26:31Z

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 7, 2016 at 13:26

M. A. Cordeiro

4798 silver badges14 bronze badges

2 Comments

Suvojit Over a year ago

have used ng-disabled but my view refreshes with new data everytime so the ng-disabled doesnt works that time around.

Suvojit Over a year ago

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

Collectives™ on Stack Overflow

Checkbox not getting disabled using jquery

5 Answers 5

2 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related