Como adicionar um atributo "somente leitura" a uma <entrada>?

301

Como posso adicionar readonlya um específico <input>? .attr('readonly')não funciona.

javascript jquery

— Qiao
fonte

2

.attr ( 'readonly', true) obras, outro não faça

— Qiao

3

.attr ('readonly', 'readonly') também funciona #

— 2020 Qiao

3

Depende de qual DOCTYPE você usa. Para DTDs HTML 4.01, a resposta do CMS está funcionando e é válido o HTML 4.01. Se você usa um XHTML DTD, a resposta de ceejayoz está funcionando e é XHTML válido.

— bjoernwibben

2

Não depende do tipo de documento, o DOM é o mesmo, se foi lido através de HTML ou XML e, em qualquer caso, o XHTML quase sempre ainda é realmente servido como HTML e não XML, para compatibilidade com o IE.

— 22909 bobince

545

jQuery <1.9

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

jQuery 1.9+

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

Leia mais sobre a diferença entre prop e attr

— CMS
fonte

1

Você tem certeza? Eu também pensava assim, mas não consigo encontrar nada nas especificações. <input name = "foo" readonly = "readonly" value = "bar" /> valida perfeitamente em validator.w3.org com xhtml 1.0 strict.

— Jonas Stensved

17

Esta postagem deve ser alterada para .prop () em vez de .attr (), conforme declarado na API do jQuery: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

O atributo readonly é um "atributo booleano" - whatwg.org/specs/web-apps/current-work/#boolean-attribute Apesar do nome um tanto enganador, os valores não devem ser "true" ou "false". Embora eu ache que o código acima realmente funcione (testado no Chrome com o jQuery 1.8.1), ele pode causar confusão posterior para os inexperientes. Além disso, de acordo com a documentação do jQuery, o valor deve ser número ou sequência, não um valor booleano. api.jquery.com/attr/#attr2

— Luke

151

Use $ .prop ()

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

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

— Greg
fonte

8

Depois de ler a API do jQuery para .prop, essa deve ser a resposta aceita. Eu sempre fiz .attr ('readonly', 'readonly') e .removeAttr ('readonly') no passado, mas isso parece estar mais correto e torna o código mais limpo.

— Evan w

4

Todos devem usar esta resposta, como indicado aqui: jquery.com/upgrade-guide/1.9/#attr-versus-prop-

— frshca

4

Uma palavra de cautela ao usar $.prop(): Prop definirá o atributo readonly como string em branco / vazia; portanto, se você tiver algum CSS que use o seletor de atributos [readonly="readonly"], precisará alterá-lo para [readonly](ou incluir ambos).

— 28413 Luke

28

O Readonly é um atributo conforme definido no html, portanto, trate-o como um.

Você precisa ter algo como readonly = "readonly" no objeto com o qual está trabalhando, se desejar que não seja editável. E se você quiser que seja editável novamente, não terá algo como readonly = '' (isso não é padrão se eu entendi corretamente). Você realmente precisa remover o atributo como um todo.

Como tal, ao usar o jquery, adicioná-lo e removê-lo é o que faz sentido.

Defina algo somente leitura:

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

Remova somente leitura:

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

Esta foi a única alternativa que realmente funcionou para mim. Espero que ajude!

20

.attr('readonly', 'readonly')deve fazer o truque. Você .attr('readonly')só retorna o valor, ele não define um.

— ceejayoz
fonte

16

attr () do jQuery funciona nas propriedades do JavaScript, não nos atributos HTML, mesmo que os nomes impliquem de outra forma. attr ('readonly') está realmente operando na propriedade HTML de nível 1 do DOM readOnly, que é um booleano, portanto 'true' é mais apropriado. No entanto, a string 'readonly' também é um valor verdadeiro quando convertida automaticamente em um booleano, portanto, o acima ainda funciona.

— 22909 bobince

Eu não acho que você deseja definir o atributo como 'true'. O .attrvalor deve ser apenas uma sequência ou número, não um valor booleano, de acordo com os documentos do jQuery: api.jquery.com/attr/#attr2 Além disso, os "atributos booleanos" em HTML devem ser apenas uma sequência vazia ou o valor do atributo. Eu acho que a solução é usar .prop()para evitar confusão.

— 28413 Luke

16

Eu acho que "desativado" exclui a entrada de ser enviado no POST

4

Sim. Eu encontrei este tópico ao procurar uma alternativa para "desativado" apenas por esse motivo.

— Jonas Stensved

mas você pode habilitá-lo imediatamente antes de enviá-lo e desabilitá-lo mais tarde $ (document) .on ('submit', "#myform", function (e) {// ativar entradas retornam true; // desabilite-o novamente se você require} funciona eu testei #

— Geomorillo

Somente valores de entrada de leitura em html podem ser enviados no POST sem usar oculto?

— precisa

12

Você pode desativar o readonly usando o .removeAttr;

$('#descrip').removeAttr('readonly');

— Steve
fonte

5

Para ativar somente leitura:

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

Para desativar somente leitura

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

— Pradeep
fonte

De api.jquery.com/attr "A partir do jQuery 1.6, o método .attr () retorna indefinido para atributos que não foram definidos. Para recuperar e alterar propriedades do DOM, como o estado verificado, selecionado ou desativado dos elementos do formulário, use o método .prop (). "

— David Clarke

1

O atributo não deve ser definido como uma cadeia de caracteres "true". Isso pode funcionar, mas não é tecnicamente correto. (Veja meus comentários anteriores acima.) #

— 285 Luke Luke

Não use essa sugestão, muito melhores disponíveis aqui. "true" não está correto para a configuração e a remoção também está incorreta.

— MiFiHiBye

4

Use a propriedade setAttribute. Observe no exemplo que, se selecione 1, aplique o atributo somente leitura na caixa de texto, caso contrário, remova o atributo somente leitura.

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
fonte

-4

Para a versão jQuery <1.9:

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

Para a versão jQuery> = 1.9:

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

— Osman Adak
fonte