Как добавить атрибут «только для чтения» в <input>?

301

Как я могу добавить readonlyк конкретному <input>? .attr('readonly')не работает.

Цяо
источник
2
.attr («только для чтения», правда) работает, другие не работают
Qiao
3
.attr («только для чтения», «только для чтения») также работает
Qiao
3
Это зависит от того, какой DOCTYPE вы используете. Для HTML 4.01 DTD ответ от CMS работает и действительный HTML 4.01. Если вы используете DTD XHTML, то ответ от ceejayoz работает и является действительным XHTML.
bjoernwibben
2
Он не зависит от типа документа, DOM одинаков, независимо от того, был ли он прочитан через HTML или XML, и в любом случае XHTML почти всегда по-прежнему фактически используется как HTML, а не как XML, для совместимости с IE.
bobince

Ответы:

545

JQuery <1,9

$('#inputId').attr('readonly', true);

jQuery 1.9+

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

Узнайте больше о разнице между prop и attr

CMS
источник
1
Ты уверен? Я тоже так думал, но ничего не могу найти в спецификациях. <input name = "foo" readonly = "readonly" value = "bar" /> отлично проверяется на validator.w3.org со строгим xhtml 1.0.
Джонас Стенсвед
17
Этот пост должен быть изменен на .prop (), а не .attr (), как указано в jQuery API: jquery.com/upgrade-guide/1.9/#attr-versus-prop-
frshca
Атрибут readonly является «логическим атрибутом» - whatwg.org/specs/web-apps/current-work/#boolean-attribute Несмотря на несколько вводящее в заблуждение имя, значения не должны быть «истинными» или «ложными». Хотя я думаю, что приведенный выше код действительно будет работать (протестировано в Chrome с jQuery 1.8.1), это может привести к путанице для неопытных. Кроме того, согласно документам jQuery значение должно быть числом или строкой, а не логическим значением. api.jquery.com/attr/#attr2
Лука,
151

Используйте $ .prop ()

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

$("#descrip").prop("readonly",false);
Greg
источник
8
После прочтения jQuery API для .prop это должен быть принятый ответ. Я всегда делал .attr («только для чтения», «только для чтения») и .removeAttr («только для чтения»), но это кажется более правильным и делает код более чистым.
Эван
4
Каждый должен использовать этот ответ, как указано здесь: jquery.com/upgrade-guide/1.9/#attr-versus-prop-
frshca
4
Предупреждение с использованием $.prop(): Prop установит атрибут readonly в пустую / пустую строку, поэтому, если у вас есть какой-либо CSS-код, для которого используется селектор атрибута [readonly="readonly"], вам придется изменить его на [readonly](или включить оба).
Люк
28

Readonly - это атрибут, определенный в html, поэтому относитесь к нему как к одному.

Вам нужно иметь что-то вроде readonly = "readonly" в объекте, с которым вы работаете, если вы хотите, чтобы он не был редактируемым. И если вы хотите, чтобы он снова был редактируемым, у вас не будет что-то вроде readonly = '' (это не стандартно, если я правильно понял). Вам действительно нужно удалить атрибут в целом.

Таким образом, при использовании jquery его добавление и удаление имеет смысл.

Установить что-то только для чтения:

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

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

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

Это была единственная альтернатива, которая действительно работала для меня. Надеюсь, поможет!


источник
20

.attr('readonly', 'readonly')должен сделать свое дело. Ваше .attr('readonly')единственное возвращает значение, оно не устанавливает его.

ceejayoz
источник
16
Функция attr () в jQuery работает со свойствами JavaScript, а не с атрибутами HTML, хотя имена подразумевают иное. attr ('readonly') фактически работает с HTML-свойством DOM Level 1 readOnly, которое является логическим, поэтому «true» более подходит. Тем не менее, строка «только для чтения» также является истинным значением при автоматическом преобразовании в логическое значение, поэтому приведенное выше все еще работает.
бобинц
Я не думаю, что вы хотите установить атрибут на «истина». .attrЗначение должно быть только строкой или числом, а не логическое значение, в соответствии с Jquery Docs: api.jquery.com/attr/#attr2 Кроме того , HTML «Булевы атрибуты» должны быть только пустая строка или значение атрибута. Я думаю, что решение заключается в использовании, .prop()чтобы избежать путаницы.
Люк
16

Я думаю, что «отключен» исключает вход от отправки по почте


источник
4
Да, это так. Я нашел эту тему, когда искал альтернативу «отключен» именно по этой причине.
Джонас Стенсвед
но вы можете включить его непосредственно перед отправкой, а затем отключить его $ (document) .on ('submit', "#myform", function (e) {// enable input return true; // затем отключите его снова, если вы требуется} это работает, я проверил это
Geomorillo
Разрешено ли отправлять на POST входные значения только для чтения в html без использования скрытого?
Аджай Такур
12

Вы можете отключить чтение только с помощью .removeAttr;

$('#descrip').removeAttr('readonly');
Стив
источник
5

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

$("#descrip").attr("readonly","true");

Для отключения только для чтения

$("#descrip").attr("readonly","");
Прадип
источник
От api.jquery.com/attr "Начиная с jQuery 1.6, метод .attr () возвращает неопределенное значение для атрибутов, которые не были установлены. Чтобы извлечь и изменить свойства DOM, такие как проверенное, выбранное или отключенное состояние элементов формы, используйте метод .prop (). "
Дэвид Кларк
1
Атрибут не должен быть установлен в строку «истина». Это может работать, но технически не правильно. (См. Мои предыдущие комментарии выше.)
Лука
Не используйте это предложение, гораздо лучшие из них доступны здесь. «true» неверно для настройки, и удаление также неверно.
MiFiHiBye
4

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

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
Диого Родригес
источник
-4

Для версии jQuery <1.9:

$('#inputId').attr('disabled', true);

Для версии jQuery> = 1.9:

$('#inputId').prop('disabled', true);
Осман Адак
источник