Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I disable my checkbox from AngularJS input?

<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.

like image 204
Christine268 Avatar asked Mar 30 '15 21:03

Christine268


People also ask

How do I disable check box?

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.

How do I enable and disable a checkbox?

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.

How do you check checkbox is checked or not in AngularJS?

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.


1 Answers

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}}"

like image 139
Pankaj Parkar Avatar answered Oct 23 '22 19:10

Pankaj Parkar