Need Javascript to add an attribute in class

Question

0.00/5 (No votes)

See more:

Dear Experts,

i need a javascript to add an attribute in a class...

Here is the below Html code of HTML SELECT..

HTML

<select id="ddl_State" name="validation-select" class="select validate[required]">

<option value="">Please select</option>
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third options</option>
</select>

I need a javascript code for add an attribute in this class.. Eg :

HTML

<select id="ddl_State" name="validation-select" class="select validate[required] Disabled">

Here i have added "Disabled" in the class attribute.....

How can i add this using javascript, without delete the existing class attributes....

Thanks and Regards,

Dileep

Posted 3-Apr-13 23:03pm

dilzz

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ankur^\m/ · Answer 1 · 2013-04-03T23:14:00

Solution 1

Using Javascript, you can do it using setAttribute()[^] method.

JavaScript

var elem = document.getElementById("ddl_State");
elem.setAttribute("class", "select validate[required] Disabled");

Using jQuery, it's pretty simple:

JavaScript

$("#ddl_State").attr("class", "select validate[required] Disabled");

[Edit]
.prop()[^] is recommended way and supported in newer versions of jQuery. So below code is better:

JavaScript

$("#ddl_State").prop("class", "select validate[required] Disabled");

Posted 3-Apr-13 23:14pm

Ankur^\m/

Updated 3-Apr-13 23:21pm

v2

Comments

dilzz 4-Apr-13 5:55am

These code are working fine.. i can see the change when i check in the inspect Element.. But this drop downlist will not be disabled.... :( when i hard coded this , then it become disabled.. but when i use the above code then it didn't disabled......

please advice me...

Thanks

Ankur^\m/ 4-Apr-13 6:00am

Add this line to your javascript code and it should be fine:
$("#ddl_State").attr("disabled", "disabled");

vijay__p · Answer 2 · 2013-04-03T23:14:00

Solution 2

using jQuery

JavaScript

var existingClass= $('#ddl_State').prop('class');
$('#ddl_State').prop('class',existingClass + ' Disabled');

Posted 3-Apr-13 23:14pm

vijay__p

Comments

dilzz 4-Apr-13 5:55am

These code are working fine.. i can see the change when i check in the inspect Element.. But this drop downlist will not be disabled.... :( when i hard coded this , then it become disabled.. but when i use the above code then it didn't disabled......

please advice me...

Thanks

vijay__p 4-Apr-13 6:05am

If you want to disable dropdown then disabled value should not be inside class attribute. It should be added as separate attribute. try below code to disable dropdown.

$('#ddl_State').prop('disabled','disabled');