Como posso usar o jQuery para fazer uma entrada somente leitura?

142

Eu tenho a seguinte entrada:

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

Como posso usar o jQuery para tornar esse elemento uma entrada somente leitura sem alterar o elemento ou seu valor?

jquery useranon
fonte

255

Atualmente, com o jQuery 1.6.1 ou superior, é recomendado que .prop () seja usado ao definir atributos / propriedades booleanas.

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

Gourneau
fonte

89

basta adicionar o seguinte atributo

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

jQuery para fazer a mudança para o elemento (substituto disabledpara readonlya seguir para a definição de readonlyatributo).

$('#fieldName').attr("disabled","disabled")

ou

$('#fieldName').attr("disabled", true)

NOTA: A partir do jQuery 1.6, é recomendável usar em .prop()vez de .attr(). O código acima irá funcionar exatamente o mesmo, exceto substituto .attr()para .prop().

Russ Cam
fonte

4

desabilitar um campo não é o mesmo que torná-lo não editável, certo? desativá-lo fará também não submeter

Dave

2

@Dave correto. Também entradas somente leitura pode ser focada, entradas com deficiência não pode

Russ Cam

74

Para fazer uma entrada somente leitura, use:

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

para fazer uso de leitura / gravação:

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

adicionar o disabledatributo não enviará o valor com postagem.

Reem
fonte

7

Você pode fazer isso simplesmente marcando-o disabledou enabled. Você pode usar este código para fazer isso:

//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

ou

$ ('# fieldName'). prop ('somente leitura', true);

$ ('# fieldName'). prop ('somente leitura', false);

--- É melhor usar prop em vez de attr.

pixellab
fonte

7

Entradas desativadas não são enviadas no formulário de postagem / recebimento.

Nielsvh

4

Use este exemplo para tornar a caixa de texto somente leitura ou não.

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>

Gopakumar AP
fonte

3

Existem dois atributos, a saber, readonlye disabledque podem gerar uma entrada semi-somente leitura. Mas há uma pequena diferença entre eles.

<input type="text" readonly />
<input type="text" disabled />

O readonlyatributo desabilita o texto de entrada e os usuários não podem mais alterá-lo.
O disabledatributo não apenas tornará seu texto de entrada desativado (imutável), mas também não poderá ser enviado .

Abordagem jQuery (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

Abordagem jQuery (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

Abordagem JavaScript:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS propintroduzido com jQuery 1.6.

Elyas Hadizadeh
fonte

0

Dado -

<input name="foo" type="text" value="foo" readonly />

isso funciona - (jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

testado com readonly e readOnly - ambos funcionaram.

NAVNEET CHANDAN
fonte

-1

Talvez use o atributo desativado:

<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />

Ou apenas use a tag label;;)

<label>

IProblemFactory
fonte

1

A pergunta dizia "With jQuery" (o que implica que deve ser feito dinamicamente) e "somente leitura" (que é diferente de desativado).

Quentin

-1

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>

Raghav
fonte

-1

Talvez seja significativo também acrescentar que

$('#fieldName').prop('readonly',false);

pode ser usado como uma opção de alternância.

Josh Pule
fonte

Eu tentei isso com o jQuery 3.3.1 e ele simplesmente adiciona um readonlyatributo ao elemento, independentemente do valor passado. Portanto, seu exemplo acabaria tornando o campo de entrada somente leitura, apesar de ostensivamente definir o valor como false.

TMN

-1

No JQuery 1.12.1, meu aplicativo usa o código:

$('"#raisepay_id"')[0].readOnly=true;

$('"#raisepay_id"')[0].readOnly=false;

e funciona.

PK
fonte

-2

O setReadOnly (state) é muito útil para formulários, podemos definir qualquer campo para setReadOnly (state) diretamente ou de várias condições. Mas eu prefiro usar readOnly para definir opacidade no seletor, caso contrário o attr = 'disabled' também funcionará como mesma maneira.

exemplos readOnly:

$('input').setReadOnly(true);

ou através de várias codições como

var same = this.checked;
$('input').setReadOnly(same);

aqui estamos usando o valor booleano do estado para definir e remover o atributo readonly da entrada, dependendo de um clique na caixa de seleção.

pixellabme
fonte

os exemplos acima não funcionam - setReadOnly não é uma função incorporada ao jquery ou a qualquer navegador #

Dave B 84

-3

Em html

$('#raisepay_id').attr("readonly", true) 

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

no bootstrap

$('#raisepay_id').attr("disabled", true) 

$("#raisepay_id").prop("disabled",true);

O JQuery é uma biblioteca em mudança e, às vezes, eles fazem melhorias regulares. .attr () é usado para obter atributos das tags HTML e, embora esteja perfeitamente funcional, o .prop () foi adicionado posteriormente para ser mais semântico e funciona melhor com atributos sem valor, como 'marcado' e 'selecionado'.

É recomendável que, se você estiver usando uma versão posterior do JQuery, use .prop () sempre que possível.

Raja Ram T
fonte

2

Votei isso porque é sem sentido. É tudo HTML, JavaScript e o Bootstrap usa jQuery para que esse fato não seja relevante. Além disso, desativado e somente leitura são duas coisas diferentes que funcionam independentemente de o Bootstrap ser ou não usado.

simontemplar 02/08/2015

Como posso usar o jQuery para fazer uma entrada somente leitura?

Respostas: