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

Question 1

У меня есть следующие данные:

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

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

Question 2

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

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

Question 3

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

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

Question 4

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

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

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

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

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

Question 5

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

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

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

или

$ ('# fieldName'). prop ('только для чтения', истина);

$ ('# fieldName'). prop ('только для чтения', ложь);

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

Question 6

Есть два атрибута, а именно readonlyи disabled, которые могут вводиться частично только для чтения. Но между ними есть небольшая разница.

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

readonlyАтрибут делает ваш ввод текста отключен, и пользователи не могут изменить его больше.
disabledАтрибут не только сделает ваш вводимый текст отключенным (неизменным), но и не сможет его отправить .

Подход jQuery (1):

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

Подход jQuery (2):

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

Подход JavaScript:

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

PS propпредставлен с jQuery 1.6.

Question 7

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

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

Question 8

Дано -

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

это работает - (jquery 1.7.1)

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

протестировано с readonly и readOnly - оба работали.

Question 9

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

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

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

<label>

Question 10

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

Question 11

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

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

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

Question 12

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

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

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

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

Question 13

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

readOnly примеры:

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

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

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

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

Question 14

В 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 () по возможности.