How can I disable my checkbox from AngularJS input?

Question

<div ng-repeat="x in spaceutilization">
  <input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" /><label for="{{x.id}}"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
</div>

I need to be able to add something to this snippet that disables the input checkbox based on another AngularJS input such as {{x.status}}. I tried simply doing:

<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" {{x.status}} />

Where status:'disabled' but that gave an output of

{{x.status}}=""

within the input element...which I don't understand why at all. But it seemed like the simplest route.

You can't add attributes dynamically using Interpolation method to your html tag. In your case you can simply do ng-disabled="x.status" — Rahil Wazir
– Rahil Wazir, Commented Mar 30, 2015 at 21:20

YaSh Chaudhary · Accepted Answer · 2018-09-18 08:00:14Z

17

You need to use ng-disabled="expression" directive, on basic of expression evaluation value it add disabled attribute to that element.Also for better attribute values evaluation you could use ng-attr directive

Markup

<input type="checkbox" ng-attr-name="{{x.filenumber}}" ng-attr-id="{{x.id}}" class ="pdffiles" 
value="101SP{{x.initials}}.dwg" ng-disabled="x.status == 'disabled'"/>

If x.status does return a bool value then you could directly used ng-disabled="{{x.status}}"

edited Sep 18, 2018 at 8:00

YaSh Chaudhary

2,7359 gold badges41 silver badges77 bronze badges

answered Mar 30, 2015 at 21:11

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

6 Comments

Christine268 Over a year ago

do you mean {{x.status}} == 'disabled' ? Also, what would status equal? What if I don't what the checkbox disabled?

Christine268 Over a year ago

Using @Rahil Wazir's comment above, I did ng-disabled="{{x.status}}" where status:'true' or status:'false"

Pankaj Parkar Over a year ago

@Christine268 hey don't use interpolation with ng-disabled directive, ng-disabled directive is matured enough to evaluate scope variables, It must be ng-disabled="x.status" if x.status has boolean

Christine268 Over a year ago

@pankajparker when I change it to ng-disabled="x.status" it no longer works. status either equals true or false. ng-disabled="{{x.status}}" is what's working for me.

Pankaj Parkar Over a year ago

@Christine268 I updated answer, Now you can do upvote & accept it Thanks :)

|

Collectives™ on Stack Overflow

How can I disable my checkbox from AngularJS input?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related