Set Attribute Without Value

Set attribute without value

The attr() function is also a setter function. You can just pass it an empty string.

$('body').attr('data-body','');

An empty string will simply create the attribute with no value.

<body data-body>

Reference - http://api.jquery.com/attr/#attr-attributeName-value

attr( attributeName , value )

Add single attribute without value using jquery

Just pass empty string to attr value.

$('.media').attr('data-type-sticky','');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class='media'>Hello</div>

How to set HTML attributes without values (e.g checked, selected, disabled) in jQuery

Following your example, suppose that you have

<select id="auto-makers">
  ...
  <option value="fiat">FIAT</option>
  <option value="ford">FORD Motor Company</option>
  <option value="gm">General Motors</option>
  ...
</select>

and that you want to add the selected attribute to the <option> such that value="fiat". Hence, with pure Javascript you can use setAttribute method:

var select = document.getElementsById('auto-makers');
for (var i=0; i<select.options.length; i++){
   if (select.options[i].value=="fiat"){
     select.options[i].setAttribute('selected','');
     break;
   }
}

while with jQuery you can simply use the attr method:

$('#auto-makers').find('option[value="fiat"]').attr('selected','');

In both cases, an empty string is passed as value for the attribute.

You can verify that the output is the one desired by looking at the related HTML code just after the changes you provided.

Finally, notice that a similar question is: "Set attribute without value".

Thymeleaf - Add attribute without value

Let's assume condition is true when your attribute should be shown and false when it shouldn't. You can have following:

<span data-my-attr th:attr="${condition} ? 'meaningless' : 'data-my-attr'=''"></span>

Explanation:

According to this thread when you specify the empty value for an attribute within th:attr then Thymeleaf will delete this attribute. So in above snippet:

data-my-attr is added by default.
The empty value is assigned to an attribute using th:attr.
The name of the attribute overriden with empty value is selected accordingly to ${condition}.
When ${condition} is true then data-my-attr should stay so any meaningless name (not present within the tag) should be picked.
Otherwise data-my-attr should be deleted so this name is picked.

Feels hacky but such a way of attribute removal seems working since 2012. Therefore I'd consider it stable.

jQuery set attribute without value

You shouldn't worry about the attribute at all, you should be changing the property

$('option').prop('selected', true);

You can also set the selected option by just changing the value of the select (assuming it's not multiple)

$('select').val('test');

It doesn't matter what it looks like in the HTML, it's the representation in the DOM that matters, both for setting the option as selected and when submitting the form it's in.

FYI, <option value="test" selected="selected"> is not undesireable at all, it's completely valid and what you'd generally want.

When the selected attribute is present, the option is selected, regardless of the attributes value, even if it's empty the option will be selected.

Attributes should have values though, so selected="selected" is fine, and even something like selected="hello kitty" would select the option, to unselect it you'd remove the attribute, but again, you should be changing the property!!!

How to add attribute without value

It's also valid to pass the name of the attribute as the value:

input.Attributes.Add("required", "required");

Add attribute without value to Blazor component depending on other attribute value

You can use

<InputFile ... multiple="@Multiple" />

When @Multiple is false Blazor will remove the 'multiple' attribute, when it is true it will result in just multiple in the HTML, without the = .

It works the same for hidden, disabled etc.

Set Attribute Without Value