Как я могу использовать jQuery для ввода ввода только для чтения?

У меня есть следующий ввод:

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

Как я могу использовать jQuery, чтобы сделать этот элемент доступным только для чтения, без изменения элемента или его значения?

Ответы

Ответ 1

В эти дни с jQuery 1.6.1 или выше рекомендуется использовать .prop() при настройке логических атрибутов/свойств.

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

Ответ 2

просто добавьте следующий атрибут

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

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

jQuery, чтобы внести изменения в элемент (замените disabled на readonly в следующем для установки атрибута readonly).

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

или

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

ПРИМЕЧАНИЕ. Начиная с jQuery 1.6, рекомендуется использовать .prop() вместо .attr(). Вышеприведенный код будет работать точно так же, за исключением замены .attr() для .prop().

Ответ 3

Чтобы сделать ввод только для чтения, используйте:

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

чтобы использовать чтение/запись:

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

добавление атрибута disabled не отправит значение с сообщением.

Ответ 4

Вы можете сделать это, просто отметив его disabled или enabled. Вы можете использовать этот код для этого:

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

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

или

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

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

--- Лучше использовать опору вместо attr.

Ответ 5

Используйте этот пример, чтобы создать текстовое поле ReadOnly или Not.

<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>

Ответ 6

Возможно использование атрибута отключено:

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

Или просто используйте тег метки:;)

<label>

Ответ 7

<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>

Ответ 8

Возможно, имеет смысл добавить, что

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

может использоваться как опция переключения.

Ответ 9

В JQuery 1.12.1 мое приложение использует код:

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

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

и он работает.

Ответ 10

Функция setReadOnly (состояние) очень полезна для форм, мы можем установить любое поле в setReadOnly (состояние) напрямую или из разных условий. Но я предпочитаю использовать readOnly для установки непрозрачности для селектора, иначе attr = 'disabled' также работал точно так же.

read Только примеры:

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

или через различное кодирование типа

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

здесь мы используем логическое значение состояния для установки и удаления атрибута readonly с входа в зависимости от щелчка на флажке.

Ответ 11

В html

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

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

в бутстрапе

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

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

JQuery - это изменяющаяся библиотека, и иногда они делают регулярные улучшения..attr() используется для получения атрибутов из тегов HTML, и хотя он отлично функционирует .prop() был добавлен позже, чтобы быть более семантическим, и он работает лучше с атрибутами без ценности, такими как "checked" и "selected".

Сообщается, что если вы используете более позднюю версию JQuery, вы должны использовать .prop(), когда это возможно.