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

162

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

amirash
источник
4
Обратите внимание, что при этом вы заставляете значения этих элементов «исчезать» при отправке формы - для сохранения значения сделайте их readOnly, а не отключенными.
Shadow Wizard - это ухо для тебя
Возможный дубликат Как отключить все содержимое div
Мишель Айрес
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);
        }
    }
Сайед Насир Аббас
источник
4

Просто эта строка кода отключит все элементы ввода

$('#yourdiv *').prop('disabled', true);
Самир Рахими
источник
лучший ответ от моего мнения.
Ajay2707
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");
    }
}
AWizardInDallas
источник
два в одном решении отлично.
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);
irfandar
источник
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");
Manish
источник
0

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

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

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

$('#myForm *').attr('disabled','disabled');
Урвиш Джоши
источник
1
Пожалуйста, исправьте ваше второе предложение. Кажется, он говорит, что ваш код отключит не входные элементы, но тогда он скажет, что он повлияет только на входные элементы. Пожалуйста, уточните ваш смысл. (Аккуратный трюк, кстати - хороший ответ)
cssyphus