отключить все элементы формы внутри div


162

Есть ли способ отключить все поля (textarea / textfield / option / input / checkbox / submit и т. д.) в форме, сообщив только имя родительского div в jquery / javascript?


4
Обратите внимание, что при этом вы заставляете значения этих элементов «исчезать» при отправке формы - для сохранения значения сделайте их readOnly, а не отключенными.
Shadow Wizard - это ухо для тебя


1
Идея может состоять в том, чтобы скрыть / показать div перед элементами управления, которые разрешены / запрещены для нажатия, плюс стиль отключенных элементов управления с помощью css.
Jaider

Ответы:


261

Попробуйте использовать :inputселектор вместе с родительским селектором:

$("#parent-selector :input").attr("disabled", true);

Могу ли я использовать это, чтобы установить все входы внутри div на значение 0?
jackson5

2
Я также хочу отключить <a> ... Мой <a> тоже
включился

7
Цитирование jQuery : поскольку: input является расширением jQuery и не является частью спецификации CSS, запросы, использующие: input, не могут воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом DOM querySelectorAll (). Чтобы добиться максимальной производительности при использовании: input для выбора элементов, сначала выберите элементы с помощью чистого селектора CSS, затем используйте .filter (": input").
акме

2
@acme: согласен на 100%, но вопрос не дает никаких подсказок относительно того, какой селектор я мог бы отфильтровать. Единственная информация, которую мне дали, заключалась в том, что пользователь должен иметь возможность делать это с именем родителя,div и все. Если бы мне дали больше информации, я мог бы найти более эффективное решение.
Эндрю Уитакер

1
Используйте .prop () вместо .attr () (выше jquery 1.6)
Акшай Гундевар

154
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

4
это должно быть ('input, textarea, button'), все селекторы должны быть заключены в один набор кавычек. api.jquery.com/multiple-selector Делая это по-своему, вы отправляете несколько аргументов.
Иван Иванич

2
Это будет только найти вас входы, игнорируя текстовые области и кнопки. Селектор: input - это то, что нужно, но если вы хотите явно перечислить их, вам нужно будет использовать $('#mydiv').find('input, textarea, button').
Марк Хилдрет

1
... или просто $ ('# your-form'). children (). prop ('disabled', true);
Walv

@walv ваш код работает, только если все элементы формы являются единственными потомками формы. Find () находит все элементы в списке независимо от уровня происхождения. Эта строка кода верна, за исключением использования prop вместо attr для новых версий jquery.
Крис О

32

Для JQuery 1.6+, использовать .prop()вместо .attr(),

$("#parent-selector :input").prop("disabled", true);

или

$("#parent-selector :input").attr("disabled", "disabled");

2
Вы правы, но какое-то время работаете, а иногда не работаете, особенно в связи с флажками и радиопереключателями
Деймон

я понимаю, что это старая ветка, но при использовании машинописи появляются некоторые ошибки
Саймон Прайс

5
    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }


2

Как насчет достижения этого, используя только атрибут HTML «отключен»

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

Просто включив отключенный в fieldset все поля внутри этого fieldset отключаются.

$('fieldset').attr('disabled', 'disabled');

1

Я использую функцию ниже в различных точках. Работает в элементах div или button в таблице, если используется правильный селектор. Просто ": кнопка" не будет повторно для меня.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

два в одном решении отлично.
3 правила

0

Следующее отключит все входные данные, но не сможет сделать это для класса btn, а также добавит класс для перезаписи отключить css.

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

класс CSS

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

0

Для меня принятый ответ не сработал, так как у меня были некоторые скрытые поля asp net, которые также были отключены, поэтому я решил отключить только видимые поля

//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

0

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

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

Или добавьте имя класса в тег HTML. Это предотвратит редактирование элементов Div.


0

Только тип текста

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

Только тип пароля

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

Только тип электронной почты

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");

0

Если ваша форма внутри divпросто содержит элементы ввода формы, тогда этот простой запрос отключит каждый элемент внутри formтега:

<div id="myForm">
    <form action="">
    ...
    </form>
</div>

Тем не менее, он также отключит другие элементы form, кроме ввода , поскольку его эффекты будут видны только для элементов типа ввода, поэтому подходят в основном для всех типов форм!

$('#myForm *').attr('disabled','disabled');

1
Пожалуйста, исправьте ваше второе предложение. Кажется, он говорит, что ваш код отключит не входные элементы, но тогда он скажет, что он повлияет только на входные элементы. Пожалуйста, уточните ваш смысл. (Аккуратный трюк, кстати - хороший ответ)
cssyphus
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.