<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.
We can make a checkbox disabled in HTML using the disabled attribute. We assign the disabled attribute to an input to disable that input. We can also use the jQuery prop() method to change the disabled attribute of an input to true.
Press the disable button and then the enable button. The checkbox doesn't get enabled. As the answers tell it is because the disabled attribute is a boolean attribute.
The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button will be checked otherwise it will be unchecked.
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}}"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With