Как я могу использовать 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 () по возможности.

Answer 1

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

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

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

Answer 2

264

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

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

Гурно
источник

Обратите внимание, что readonlyэто относится не ко всем входам. [Атрибут HTML: только для чтения] (см. Developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly ). Я попытался создать объект select, который позволял бы отображать параметры, но не мог выбрать другой вариант. Это невозможно сделать с помощью readonly.

Р. Шрерс,

Answer 3

Обратите внимание, что readonlyэто относится не ко всем входам. [Атрибут HTML: только для чтения] (см. Developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly ). Я попытался создать объект select, который позволял бы отображать параметры, но не мог выбрать другой вариант. Это невозможно сделать с помощью readonly.

Р. Шрерс,

Answer 4

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

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

4

отключение поля - это не то же самое, что сделать его недоступным для редактирования, верно? при отключении он также не отправляется

Дэйв

Answer 6

2

@ Дэйв, верно. Также вводы только для чтения могут быть сфокусированы, отключенные вводы не могут

Расс Кэм

Answer 7

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

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

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

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

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

Answer 8

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

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

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

или

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

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

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

Answer 9

7

Отключенные входы не отправляются в форму post / get.

Nielsvh

Answer 10

Есть два атрибута, а именно 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.

Answer 11

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

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

Дано -

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

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

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

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

Answer 13

-1

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

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

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

<label>

IProblemFactory
источник

1

В вопросе говорилось «С jQuery» (что подразумевает, что это должно выполняться динамически) и «только для чтения» (что отличается от отключенного).

Квентин

Answer 14

1

В вопросе говорилось «С jQuery» (что подразумевает, что это должно выполняться динамически) и «только для чтения» (что отличается от отключенного).

Квентин

Answer 15

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

Answer 16

-1

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

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

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

Джош Пуле
источник

Я пробовал это с помощью jQuery 3.3.1, и он просто добавляет readonlyатрибут к элементу, независимо от переданного значения. Таким образом, в вашем примере поле ввода будет доступно только для чтения, несмотря на то, что якобы установлено значение false.

TMN

Answer 17

Я пробовал это с помощью jQuery 3.3.1, и он просто добавляет readonlyатрибут к элементу, независимо от переданного значения. Таким образом, в вашем примере поле ввода будет доступно только для чтения, несмотря на то, что якобы установлено значение false.

TMN

Answer 18

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

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

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

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

Answer 19

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

readOnly примеры:

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

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

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

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

Answer 20

приведенные выше примеры не работают - setReadOnly не является функцией, встроенной в jquery или какие-либо браузеры

Дэйв Б. 84,

Answer 21

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

Answer 22

2

Я проголосовал против, потому что это бессмысленно. Все HTML, JavaScript и Bootstrap используют jQuery, так что этот факт даже не имеет значения. Дополнительно отключен и только для чтения - это две разные вещи, которые работают независимо от того, используется ли Bootstrap или нет.

simontemplar 02 авг.15,

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

Ответы: