Jak mogę użyć jQuery, aby dane wejściowe były tylko do odczytu?

142

Mam następujące dane wejściowe:

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

Jak mogę użyć jQuery, aby uczynić ten element wejściem tylko do odczytu bez zmiany elementu lub jego wartości?

jquery useranon
źródło

Odpowiedzi:

255

Obecnie z jQuery 1.6.1 lub nowszym zaleca się używanie .prop () podczas ustawiania atrybutów / właściwości logicznych.

$("#fieldName").prop("readonly", true);
Gourneau
źródło
89

po prostu dodaj następujący atrybut

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

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

jQuery dokonać zmiany elementu (zmiennika disableddla readonlyponiżej do ustawiania readonlyatrybutu).

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

lub 

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

UWAGA: Począwszy od jQuery 1.6, zaleca się używanie .prop()zamiast .attr(). Powyższy kod będzie działać dokładnie tak samo z wyjątkiem substytut .attr()dla .prop().

Russ Cam
źródło
4
wyłączenie pola to nie to samo, co uczynienie go nieedytowalnym, prawda? wyłączenie go spowoduje również, że nie zostanie przesłany
Dave
2
@Dave poprawne. Również wejścia tylko do odczytu mogą być skupione, wyłączone wejścia nie
Russ Cam
75

Aby wprowadzić dane wejściowe tylko do odczytu, użyj:

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

aby uczynić go do odczytu / zapisu użyj:

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

dodanie disabledatrybutu nie spowoduje wysłania wartości pocztą.

Reem
źródło
7

Możesz to zrobić, po prostu zaznaczając go disabledlub enabled. Możesz użyć tego kodu, aby to zrobić:

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

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

lub

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

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

--- Lepiej jest użyć właściwości zamiast atr.

pixellab
źródło
7
Wyłączone dane wejściowe nie są przesyłane po wysłaniu / otrzymaniu formularza.
Nielsvh
4

Użyj tego przykładu, aby pole tekstowe było tylko do odczytu lub nie.

<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
źródło
3

Istnieją dwa atrybuty, a mianowicie readonlyi disabled, które mogą stanowić dane wejściowe tylko do odczytu. Ale jest między nimi niewielka różnica.

<input type="text" readonly />
<input type="text" disabled />
  • readonlyCecha sprawia, że tekst wejście wyłączone, a użytkownicy nie są w stanie zmienić go już.
  • disabledAtrybut nie tylko spowoduje wyłączenie tekstu wejściowego (niezmienność), ale także uniemożliwi jego przesłanie .

Podejście jQuery (1):

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

Podejście jQuery (2):

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

Podejście JavaScript:

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

PS propwprowadzony z jQuery 1.6.

Elyas Hadizadeh
źródło
0

Dany -

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

to działa - (jquery 1.7.1)

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

testowane z readonly i readOnly - oba działały.

NAVNEET CHANDAN
źródło
-1

Może użyć atribute disabled:

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

Lub po prostu użyj tagu etykiety:;)

<label>
IProblemFactory
źródło
1
Pytanie brzmiało: „Z jQuery” (co oznacza, że ​​powinno się to robić dynamicznie) i „tylko do odczytu” (co różni się od wyłączenia).
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
źródło
-1

Być może warto też to dodać 

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

może być używany jako opcja przełączania.

Josh Pule
źródło
Wypróbowałem to z jQuery 3.3.1 i po prostu dodaje readonlyatrybut do elementu, niezależnie od przekazanej wartości. Więc twój przykład zakończyłby się uczynieniem pola wejściowego tylko do odczytu, pomimo pozornego ustawienia wartości na fałsz.
TMN
-1

W JQuery 1.12.1 moja aplikacja używa kodu:

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

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

i to działa.

PK
źródło
-2

SetReadOnly (stan) jest bardzo przydatny w przypadku formularzy, możemy ustawić dowolne pole na setReadOnly (stan) bezpośrednio lub z różnych warunków, ale wolę używać readOnly do ustawiania krycia dla selektora, w przeciwnym razie atrybut attr = 'disabled' również działał jak ta sama droga.

readOnly przykłady:

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

lub poprzez różne przepisy, takie jak

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

tutaj używamy wartości logicznej stanu do ustawiania i usuwania atrybutu tylko do odczytu z wejścia w zależności od kliknięcia pola wyboru.

pixellabme
źródło
powyższe przykłady nie działają - setReadOnly nie jest funkcją wbudowaną w jquery ani żadną przeglądarkę
Dave B 84
-3

W html 

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

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

w bootstrapie 

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

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

JQuery to zmieniająca się biblioteka i czasami wprowadzają regularne ulepszenia. .attr () służy do pobierania atrybutów ze znaczników HTML i chociaż jest doskonale funkcjonalny .prop () został dodany później, aby był bardziej semantyczny i działa lepiej z atrybutami bez wartości, takimi jak „zaznaczone” i „wybrane”.

Zaleca się, aby w przypadku korzystania z późniejszej wersji JQuery używać .prop () zawsze, gdy jest to możliwe.

Raja Ram T
źródło
2
Głosowałem za tym odrzuceniem, ponieważ jest to bezsensowne. To wszystko w HTML, JavaScript i Bootstrapie używa jQuery, więc ten fakt nie jest nawet istotny. Dodatkowo wyłączone i tylko do odczytu to dwie różne rzeczy, które działają niezależnie od tego, czy używany jest Bootstrap.
simontemplar