如何使用jQuery在DOM元素中添加非值属性

Question

I want to add a property on DOM elements using jQuery.

The attribute is disabled, which bootstrap uses this attribute to disable an element. eg

<p>A paragraph</p>

and want it to become

<p disabled> A paragraph </p>

But running the following code

$('p').attr('disabled', '');

gives me:

<p disabled="disabled"><A paragraph</p>

Tried using prop() but prop didn't even add the property.

$('p').prop('disabled','');

How can I add a non-value attribute using jQuery?

Or what am I doing wrong?

Answer 1

You are dealing with a DOM, not with HTML. disabled and disabled="disabled" are equivalent and there is no way to tell the browser how (when serialising to HTML) it should serialise an attribute which can be serialised in multiple ways.

( disabled="" is, last time I checked, invalid)

Answer 2

Try .replaceWith()

$('p').replaceWith(function (_, old) {
    return '<p disabled>' + old + '</p>';
});

fiddle Demo