Why $().prop() will not set attribute value?

Question

Why .prop will not set the attribute value in the example? Bootstrap 3.1.1 and jQuery 2.1 are used.

HTML

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> Option 3
    </label>
</div>

jQuery

$('label').click
(
    function()
    {
        // Does not set attribute
        $(this).prop('foo','bar');
    }
);

Live demo

Code has to go in the question. Your question cannot depend on 3rd party links to be meaningfully answered. — user229044, May 27 '14 at 12:10
I added the code from the link to the question, not sure if edits are meant to do that though — martincarlin87, May 27 '14 at 12:13
You are trying to disable a label, not the input element. Use .find() to get the input element. Reason why this question was closed was because it didn't contain any code just a link to your website. — Anton, May 27 '14 at 12:14
http://stackoverflow.com/questions/5874652/prop-vs-attr have a look into it. — عثمان غني, May 27 '14 at 12:14
The first `prop` line should be: `$(this).attr('disabled',false); // not 'disabled'` — martincarlin87, May 27 '14 at 12:15
@عثمانغني I've already voted to reopen the question. — Anton, May 27 '14 at 12:18
@Anton I am not disabling anything. I just want an HTML attribute to be added to an HTML element using jQuery. An attribute is not added for some reason. — Kolyunya, May 27 '14 at 12:23
@Kolyunya "I am not disabling anything. I just want an HTML **attribute** to be added to an HTML element using jQuery. An **attribute** is not added for some reason." ... use .attr — JF it, May 27 '14 at 12:42

Rohan Kumar · Accepted Answer · 2014-05-27T12:56:59.317

2

You need to use attr() not prop() like,

$('label').click(function(){
    // Use attr as disabled is not a property of a label
    $(this).attr('disabled',true);
});

disabled is not a property of a label, so it will not work on label, as your tried. And if you want to add disabled as an attribute then you need to use attr()

Live Demo

edited May 27 '14 at 12:56

answered May 27 '14 at 12:32

Rohan Kumar

40,431
11
76
106

OP already said his aim is to add a attribute to the element. He just used disabled as an example – asprin May 27 '14 at 12:35

score 0 · Answer 2 · answered May 27 '14 at 12:39

0

labels do not have a disable property inherently built in. You will need to add a class to disable them yourself.

Something like:

.disabled {
   background-color: #428bca;
}

And to add the class to your element:

$(this).addClass('disabled');

answered May 27 '14 at 12:39

Raju Padhara

687
1
7
20

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

hi i thing you are confused between attr and prop, both are different in many cases this link will solve your problem

edited May 23 '17 at 10:26

Community

1
1

answered May 27 '14 at 12:55

Jeetendra Chauhan

1,977
2
15
21

Why $().prop() will not set attribute value?

3 Answers3