javascript disabled attribute not working in angularJS?

Question

I have written the following line to add an disable attribute to an element in angular

angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');

but it is not working and throwing an error:

angular.element(...).setAttribute is not a function

You should definitely use ng-disabled if you are using AngularJS. — ssc-hrep3
– ssc-hrep3, Commented Jan 20, 2017 at 12:46
yeah i too was thinking that but that element is dynamically created — abhit
– abhit, Commented Jan 20, 2017 at 12:48

clinton3141 · Accepted Answer · 2017-01-20 12:46:22Z

3

angular.element returns a jQuery/jQuery lite wrapped element, not the raw DOM element.

You can set it using jQuery methods:

angular.element(document.getElementsByClassName("pit")).attr('disabled', true);

This is not really the angular way though. Consider adding a service to provide values to ng-disabled, or directive to manage the disabled state.

answered Jan 20, 2017 at 12:46

clinton3141

4,8423 gold badges36 silver badges47 bronze badges

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

4 Comments

abhit Over a year ago

the element is dynamically created how can i use ng-disabled on it?

clinton3141 Over a year ago

You can use $compile to create dynamic elements which are still angular-able. Related question: stackoverflow.com/questions/15279244/…

abhit Over a year ago

i am trying to create frost screen effect whenever i click on a particular button all the contents should get blurred for that i have applied blur class on them(CSS) and I am then trying to disable thier functionalities in which case i am disabling them. so can u suggest me some other way to do so...

Cleiton Over a year ago

update your question if a jsfiddlerso we may help you.

Cleiton · Accepted Answer · 2017-01-20 12:48:24Z

2

angular.element returns a jQuery or jqLite Object, both has an attr() function that you can use instead, so:

instead of:

angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');

you should write:

angular.element(".pit").attr('disabled', 'disabled');

answered Jan 20, 2017 at 12:48

Cleiton

18.2k13 gold badges48 silver badges59 bronze badges

Comments

strwoc · Accepted Answer · 2017-01-20 12:45:21Z

1

Angular has built in jQuery, so you could just add

$(".pit").attr('disabled', true);

answered Jan 20, 2017 at 12:45

strwoc

5331 gold badge9 silver badges20 bronze badges

Comments

Hikmat Sijapati · Accepted Answer · 2017-01-20 12:46:42Z

0

angular.element(document.querySelector(".pit")).setAttribute('disabled',true);

answered Jan 20, 2017 at 12:46

Hikmat Sijapati

6,9691 gold badge11 silver badges19 bronze badges

1 Comment

BDL Over a year ago

Although this code might solve the problem, one should always consider adding an explanation to it.

Punith Mithra · Accepted Answer · 2017-01-20 12:50:21Z

0

This statement will work only if the element is an input type

angular.element(document.getElementsByClassName("pit")).attr('disabled', true);

Or use ng-disabled directive. this is the best way to disable an element in angular.

answered Jan 20, 2017 at 12:50

Punith Mithra

6285 silver badges9 bronze badges

Collectives™ on Stack Overflow

javascript disabled attribute not working in angularJS?

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related