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

Question

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

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

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

Answer 1

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

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

Answer 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().

Answer 3

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

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

для чтения / записи используйте:

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

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

Answer 4

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

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

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

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

Answer 5

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

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

Answer 6

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

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

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

<label>

Answer 7

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

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

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

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

Answer 8

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

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

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

Answer 9

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

только для чтения:

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

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

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

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

Answer 10

В 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 (), чтобы сделать его более семантическим и лучше работать с атрибутами без значений, такими как «selected» и «selected».

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