Jak dodać atrybut „tylko do odczytu” do <wejścia>?

301

Jak mogę dodać readonlydo konkretnego <input>? .attr('readonly')nie działa.

Qiao
źródło
2
.attr („tylko do odczytu”, prawda) działa, inne nie
Qiao,
3
.attr („tylko do odczytu”, „tylko do odczytu”) również działa
Qiao,
3
To zależy od tego, jakiego DOCTYPE używasz. W przypadku DTD HTML 4.01 odpowiedź z CMS działa i jest poprawna HTML 4.01. Jeśli używasz DTD XHTML, wtedy odpowiedź ceejayoz działa i jest poprawna XHTML.
bjoernwibben,
2
Nie zależy to od typu dokumentu, DOM jest taki sam, niezależnie od tego, czy został odczytany przez HTML, czy XML, a w każdym razie XHTML prawie zawsze jest faktycznie obsługiwany jako HTML, a nie XML, dla kompatybilności z IE.
bobince

Odpowiedzi:

545

jQuery <1.9

$('#inputId').attr('readonly', true);

jQuery 1.9+

$('#inputId').prop('readonly', true);

Przeczytaj więcej o różnicy między rekwizytem a attr

CMS
źródło
1
Jesteś pewny? Tak myślałem, ale nie mogę nic znaleźć w specyfikacjach. <input name = "foo" readonly = "readonly" value = "bar" /> doskonale sprawdza się na validator.w3.org z xhtml 1.0 strict.
Jonas Stensved,
17
Ten post powinien zostać zmieniony na .prop () zamiast .attr (), jak podano w jQuery API: jquery.com/upgrade-guide/1.9/#attr-versus-prop-
frshca
Atrybut tylko do odczytu to „atrybut boolowski” - whatwg.org/specs/web-apps/current-work/#boolean-attribute Pomimo nieco mylącej nazwy, wartości nie powinny być „prawdziwe” ani „fałszywe”. Chociaż myślę, że powyższy kod faktycznie będzie działał (testowany w Chrome z jQuery 1.8.1), może to prowadzić do późniejszego zamieszania dla niedoświadczonych. Ponadto, zgodnie z dokumentacją jQuery, wartość powinna być liczbą lub łańcuchem, a nie wartością logiczną. api.jquery.com/attr/#attr2
Luke
151

Użyj $ .prop ()

$("#descrip").prop("readonly",true);

$("#descrip").prop("readonly",false);
Greg
źródło
8
Po przeczytaniu jQuery API dla .prop, powinna to być zaakceptowana odpowiedź. W przeszłości zawsze robiłem .attr („tylko do odczytu”, „tylko do odczytu”) i .removeAttr („tylko do odczytu”), ale wydaje się, że jest to bardziej poprawne i sprawia, że ​​kod jest również czystszy.
evan w
4
Każdy powinien skorzystać z tej odpowiedzi, jak podano tutaj: jquery.com/upgrade-guide/1.9/#attr-versus-prop-
frshca
4
Słowo ostrzeżenia przy użyciu $.prop(): Prop ustawi atrybut readonly na pusty / pusty ciąg, więc jeśli masz CSS, który używa selektora atrybutów [readonly="readonly"], musisz zmienić to na [readonly](lub dołączyć oba).
Łukasz
28

Readonly jest atrybutem zdefiniowanym w html, więc traktuj go jak jeden.

Musisz mieć coś takiego jak readonly = "readonly" w obiekcie, z którym pracujesz, jeśli nie chcesz, aby można go było edytować. A jeśli chcesz, aby można go było ponownie edytować, nie będziesz mieć czegoś takiego jak readonly = '' (to nie jest standard, jeśli dobrze zrozumiałem). Naprawdę musisz usunąć atrybut jako całość.

Jako taki, przy użyciu jquery dodawanie i usuwanie go ma sens.

Ustaw coś tylko do odczytu:

$("#someId").attr('readonly', 'readonly');

Usuń tylko do odczytu:

$("#someId").removeAttr('readonly');

To była jedyna alternatywa, która naprawdę dla mnie zadziałała. Mam nadzieję, że to pomoże!


źródło
20

.attr('readonly', 'readonly')powinien załatwić sprawę. Twój .attr('readonly')zwraca tylko wartość, nie ustawione.

ceejayoz
źródło
16
Attr () jQuery działa na właściwościach JavaScript, a nie atrybutach HTML, nawet jeśli nazwy sugerują inaczej. attr („tylko do odczytu”) faktycznie działa na właściwości HTML DOM 1 poziomu readOnly, która jest wartością logiczną, więc „prawda” jest bardziej odpowiednia. Jednak ciąg „tylko do odczytu” jest również prawdziwą wartością, gdy jest automatycznie konwertowany na wartość logiczną, więc powyższe nadal działa.
Bobin
Nie sądzę, że chcesz ustawić atrybut na „prawda”. .attrWartość powinna być tylko ciągiem lub numer, a nie logiczna, zgodnie z docs jQuery: api.jquery.com/attr/#attr2 Również HTML „boolean atrybuty” powinno być tylko pusty ciąg lub wartość atrybutu. Myślę, że rozwiązaniem jest .prop()uniknięcie zamieszania.
Łukasz
16

Myślę, że „wyłączone” wyklucza wysyłanie danych wejściowych przez POST


źródło
4
Tak. Właśnie z tego powodu znalazłem ten wątek, szukając alternatywy dla „wyłączony”.
Jonas Stensved,
ale możesz go włączyć tuż przed wysłaniem, a później wyłączyć $ (dokument) .on („Prześlij”, „#myform”, funkcja (e) {// włącz dane wejściowe zwracają wartość true; // następnie wyłącz to ponownie, jeśli wymagają} działa, przetestowałem to
Geomorillo,
Czy wartości wejściowe tylko do odczytu w html mogą być wysyłane przez POST bez użycia ukrytego?
Ajay Takur,
12

Możesz wyłączyć tylko do odczytu, używając .removeAttr;

$('#descrip').removeAttr('readonly');
Steve
źródło
5

Aby włączyć tylko do odczytu:

$("#descrip").attr("readonly","true");

Do wyłączania tylko do odczytu

$("#descrip").attr("readonly","");
Pradeep
źródło
From api.jquery.com/attr "Od jQuery 1.6 metoda .attr () zwraca niezdefiniowane atrybuty, które nie zostały ustawione. Aby pobrać i zmienić właściwości DOM, takie jak sprawdzony, wybrany lub wyłączony stan elementów formularza, użyj metody .prop (). ”
David Clarke
1
Atrybut nie powinien być ustawiony na ciąg „true”. Może to działać, ale nie jest technicznie poprawne. (Zobacz moje poprzednie komentarze powyżej.)
Łukasz
Nie używaj tej sugestii, o wiele lepsze dostępne tutaj. „prawda” nie jest poprawna dla ustawienia, a usuwanie jest również nieprawidłowe.
MiFiHiBye
4

Użyj właściwości setAttribute. Zauważ w przykładzie, że jeśli wybierzesz 1, zastosuj atrybut tylko do odczytu w polu tekstowym, w przeciwnym razie usuń atrybut tylko do odczytu.

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
Diogo Rodrigues
źródło
-4

Dla wersji jQuery <1.9:

$('#inputId').attr('disabled', true);

Dla wersji jQuery> = 1.9:

$('#inputId').prop('disabled', true);
Osman Adak
źródło