Ustaw atrybut bez wartości

194

Jak ustawić atrybut danych bez dodawania wartości w jQuery? Chcę to:

<body data-body>

Próbowałem:

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

Wszystko inne wydaje się dodawać drugie argumenty jako ciąg. Czy można ustawić atrybut bez wartości?

David Hellsing
źródło
3
Dlaczego trzeba data-bodyVs. data-body=""?
Tabletki przeciwwybuchowe
Przynajmniej jeśli chcesz używać XHTML, nie powinieneś tego robić, ponieważ minimalizacja atrybutów nie jest dozwolona.
Matthias
9
Nie używam XHTML, używam HTML5
David Hellsing
2
@ user1689607, ponieważ zapisuję wygenerowany kod HTML jako ciąg i później muszę wykonać wyszukiwanie wsteczne.
David Hellsing
4
@ExplosionPills Jednym z przykładów jest requiredatrybut sprawdzania poprawności formularza HTML5. Jestem pewien, że istnieje wiele innych ważnych przypadków użycia.
Zero3,

Odpowiedzi:

250

Ta attr()funkcja jest również funkcją ustawiającą. Możesz po prostu przekazać mu pusty ciąg.

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

Pusty ciąg utworzy po prostu atrybut bez wartości.

<body data-body>

Odwołanie - http://api.jquery.com/attr/#attr-attributeName-value

attr (nazwa_atrybutu, wartość)

Lix
źródło
24
+1, ale PO wie, że to seter. Fakt, że przekazanie pustego łańcucha działa, ale nullnie jest zaskakujący.
Jon
2
JavaScript działa dziwnie . Wiedząc, gdzie zdarzają się te dziwactwa, usuniesz element zaskoczenia: P
Lix
25
Uwaga: To nie działa z jQuery 1.7.2 (wiem, że to nie jest najnowsza wersja), ale użycie $(el).prop('data-body', true)działało dla mnie, gdzie $(el).attr('data-body', '')skończyło się dla mnie ustawianie data-body = "data-body".
Patrick O'Doherty
6
@ PatrickO'Doherty $(el).prop('data-body', true)nie działa dla mnie. attr()działa, ale dodaje również pusty ciąg jako wartość atrybutu, który chcę dodać.
Webdevotion
1
@Andrew Uważam, że szukasz funkcji removeAttr / prop . To zależy, który atrybut próbujesz usunąć.
Lix
47

Może spróbuj:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
Callum McLean
źródło
2
Tylko to rozwiązanie działało dla mnievar btn = $(this).get(0); btn.setAttribute("disabled","");
gkiko
1
Po zabawie w .attr i .prop, jak zasugerowano we wszystkich innych rozwiązaniach i komentarzach tutaj, w końcu odkryłem, że wracając (lub przynajmniej „w połowie” wstecz) do natywnej JS, zrobiłem lewę, jak sugerowano w komentarz powyżej ... Na zdrowie!
TheCuBeMan
22

Odpowiedź Zaakceptowany nie utworzyć atrybut name tylko już (od września 2017).

Należy użyć metody prop () JQuery, aby utworzyć atrybuty tylko nazwy.

$(body).prop('data-body', true)
Charlie
źródło
Wydaje mi się, że dodawałem „value = 'true'” do mojej opcji select, zamiast po prostu „value”. Ugh.
RonLugge
zastanawiałem się, w jaki sposób zaakceptowana odpowiedź nie zawiera tego rozwiązania! to najczystszy sposób przy użyciu jquery.
den.
Nie działa w wybranych opcjach rozwijanych, niestety w Chrome
MC9000,
7

Możesz to zrobić bez jQuery!

Przykład:

document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>

Aby ustawić wartość atrybutu boolowskiego, takiego jak wyłączony, możesz podać dowolną wartość. Pusty ciąg lub nazwa atrybutu są zalecanymi wartościami. Liczy się tylko to, że jeśli atrybut jest w ogóle obecny, niezależnie od jego rzeczywistej wartości, jego wartość jest uważana za prawdziwą. Brak atrybutu oznacza, że ​​jego wartość jest fałszywa. Ustawiając wartość atrybutu disabled na pusty ciąg („”), ustawiamy wyłączone na wartość true, co powoduje wyłączenie przycisku.

Od MDN Element.setAttribute ()

LipESprY
źródło
1
Pod tym względem jQuery jest zbyt płatny. Najlepiej zrobić w javascript, abyś nie doprowadzał się do szaleństwa przy każdej zmianie jquery lub przeglądarki. Dotyczy to wszystkich tych błędnych ram klienckich.
MC9000,