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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

От MDN:

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


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

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

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


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

IE Bugs: 1, 2

tl; dr: входы "Текст" и "Файл" неправильно отключены, и пользователь все еще может взаимодействовать с ними.

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


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

Ответ 3

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

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

Ответ 4

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

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

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

EDIT: обратите внимание, что атрибут disabled может применяться к элементу fieldset только в HTML5 (см. комментарий merryprankster). Как ни странно, он работает с другим браузером, чем Firefox и Opera, такие как Chrome и Internet Explorer (проверены IE7 и IE8).

Ответ 5

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

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

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

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

И, похоже, он не работает с проверкой. И firefox, и chrome не позволят мне отправить форму с незаполненными "необходимыми" входами в отключенном наборе полей, но не дают никаких инструкций о том, как заполнить форму.

Ответ 6

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

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

Ответ 7

Попробуйте этот фрагмент кода:

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