Как я могу отключить все элементы внутри набора полей в jQuery?

Question

У меня 2 <fieldset> s на моей странице, но в одном из них все элементы должны быть отключены в зависимости от выбора пользователя.

Наборы полей содержат текстовые вводы, выборки и ссылки. Есть ли способ отключить их все вместо того, чтобы отключать их один за другим?

Answer 1

Как насчет использования селектора детей?

$("#myfieldeset").children().attr("disabled", "disabled");

Вы также можете отфильтровать выбор детей:

$("#myfieldeset").children("a,input");

Answer 2

Вы можете установить атрибут disabled fieldset.

От MDN :

Если этот логический атрибут установлен, элементы управления формы, являющиеся его потомками, за исключением потомков его первого необязательного элемента, отключаются, т.е. не редактируются. Они не будут получать какие-либо события просмотра, такие как щелчки мыши или связанные с фокусом. Часто браузеры отображают такие элементы управления как серый.

---

HTML : <fieldset disabled> ... </fieldset>

JQuery : $('#myfieldset').prop('disabled', true);

JS : document.getElementById('#myFieldset').disabled = true;

---

Важное примечание : Это не работает должным образом в Internet Explorer из-за пары ошибок , но работает хорошо почти везде (включая Edge ).

IE Ошибки: 1 , 2

tl; dr : ввод текста и файлов не отключается должным образом, и пользователь все еще может взаимодействовать с ними

Если это нарушает условия сделки, вам нужно войти в набор полей и поставить disabled на его потомков, как описано в других ответах здесь.

---

Информация о поддержке браузера : http://caniuse.com/#feat=fieldset-disabled

Answer 3

Почему бы вам просто не использовать:

$("#myfieldeset").attr("disabled", "disabled");

Это сработало для меня. Он отключил все входы детей.

РЕДАКТИРОВАТЬ: обратите внимание, что отключенный атрибут может быть применен к элементу fieldset только в HTML5 (см. Комментарий merryprankster). Как ни странно, он работает с другими браузерами, кроме Firefox и Opera, такими как Chrome и Internet Explorer (протестированы IE7 и IE8).

Answer 4

Предполагая, что вы установили class = "disableMe" в наборе полей, в котором вы хотите отключить любые элементы ввода, тогда следующий код должен сделать то, что вам нужно:

$('fieldset.disableMe :input').attr('disabled', true)

Answer 5

В дополнение к тому, что другие опубликовали:

Используйте .prop() вместо .attr():

$('#myfieldset').prop('disabled',true)

Это более правильно в отношении DOM.

И, похоже, не очень хорошо работает с проверкой. И Firefox, и Chrome не позволят мне отправить форму с незаполненными «обязательными» входами в отключенном наборе полей, но также не дают никаких инструкций по заполнению формы.

Answer 6

Если по какой-то причине вы не можете добавить идентификатор в набор полей (что обычно предпочитается), вы всегда можете сделать это, чтобы скрыть все его дочерние элементы:

$('fieldset:first > *').attr('disabled','disabled');