У меня есть 2 <fieldset> на моей странице, но у одного из них должны быть отключены все элементы в зависимости от выбора пользователя.
Наборы полей содержат текстовые входы, выделения и ссылки. Есть ли способ отключить их все, а не отключать их один за другим?
Как использовать селектор для детей?
$("#myfieldeset").children().attr("disabled", "disabled");
Вы также можете отфильтровать выбор детей:
$("#myfieldeset").children("a,input");
Вы можете установить атрибут disabled fieldset.
От MDN:
Если этот Boolean атрибут установлен, элементы управления формы, которые являются его потомками, кроме потомков его первого необязательного элемента, отключены, то есть не редактируются. Они не будут получать какие-либо события просмотра, такие как щелчки мыши или связанные с фокусом. Часто браузеры отображают такие элементы управления, как серый.
HTML: <fieldset disabled> ... </fieldset>
JQuery: $('#myfieldset').prop('disabled', true);
JS: document.getElementById('#myFieldset').disabled = true;
Важное примечание: Это не работает должным образом в Internet Explorer из-за паролей ошибок, но хорошо работает везде (включая Edge).
tl; dr: входы "Текст" и "Файл" неправильно отключены, и пользователь все еще может взаимодействовать с ними.
Если это прерыватель транзакций, вам нужно зайти в набор полей и поместить disabled на своих потомков, как описано в других ответах здесь.
Информация о поддержке браузера: http://caniuse.com/#feat=fieldset-disabled
Предполагая, что вы устанавливаете class= "на поле, которое вы хотите отключить для любых элементов ввода, следующий код должен делать то, что вам нужно:
$('fieldset.disableMe :input').attr('disabled', true)
Почему бы вам просто не использовать:
$("#myfieldeset").attr("disabled", "disabled");
Это сработало для меня. Он отлично отключил все входные данные для детей.
EDIT: обратите внимание, что атрибут disabled может применяться к элементу fieldset только в HTML5 (см. комментарий merryprankster). Как ни странно, он работает с другим браузером, чем Firefox и Opera, такие как Chrome и Internet Explorer (проверены IE7 и IE8).
В дополнение к тому, что опубликовали другие:
Используйте .prop() вместо .attr():
$('#myfieldset').prop('disabled',true)
Это более верно в отношении DOM.
И, похоже, он не работает с проверкой. И firefox, и chrome не позволят мне отправить форму с незаполненными "необходимыми" входами в отключенном наборе полей, но не дают никаких инструкций о том, как заполнить форму.
Если по какой-то причине вы не можете добавить идентификатор в набор полей (что обычно предпочтительнее), вы всегда можете сделать это, чтобы скрыть все его дочерние элементы:
$('fieldset:first > *').attr('disabled','disabled');
Попробуйте этот фрагмент кода:
$("#myfieldeset").attr("disabled", "disabled");