вимкнути всі елементи форми всередині div


162

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


4
Зауважте, що завдяки цьому ви змушуєте значення цих елементів "зникати" при поданні форми - для збереження значення make them readOnly, а не відключення.
Shadow Wizard is Ear For You


1
Ідею можна приховати / показати подію перед елементами управління, на які вона дозволяє / запобігає натисканню, а також стилі відключені елементи керування з css.
Джайдер

Відповіді:


261

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

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

чи можу я використовувати це для встановлення всіх входів усередині значення значення 0?
jackson5

2
Я хочу відключити <a> також ... Мій <a> також має onclick
RAJ

7
Посилаючись на jQuery : Оскільки: input - це розширення jQuery і не є частиною специфікації CSS, запити, що використовують: input, не можуть скористатися збільшенням продуктивності, що надається нативним методом DOM querySelectorAll (). Щоб досягти найкращої продуктивності при використанні: введення для вибору елементів, спочатку виберіть елементи за допомогою чистого селектора CSS, потім використовуйте .filter (": введення").
акме

2
@acme: Погодьтеся на 100%, але питання не дає жодних підказок щодо того, на якому селекторі я міг би фільтрувати. Єдина інформація, яку мені дали, - це те, що користувач повинен мати можливість це робити з іменем батька,div і це все. Якби мені дали більше інформації, я міг би запропонувати більш ефективне рішення.
Ендрю Вітакер

1
Використовуйте .prop () замість .attr () (вище jquery 1.6)
Akshay Gundewar

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

4
це має бути ("введення, текстова область, кнопка"), всі селектори повинні бути приведені в один набір цитат. api.jquery.com/multiple-selector Зробивши це так, як ви надсилаєте кілька аргументів.
Іван Іванич

2
Це знайде лише введення даних, ігноруючи текстові області та кнопки. Селектор введення: це шлях, але якщо ви хочете чітко їх перелічити, вам потрібно буде скористатися $('#mydiv').find('input, textarea, button').
Марк Хільдрет

1
... або просто $ ('# ваша форма'). kids (). prop ('інвалід', правда);
walv

@walv ваш код працює лише в тому випадку, якщо всі елементи форми є одним нащадком форми. Find () знаходить усі елементи списку незалежно від рівня нащадка. Цей рядок коду правильний, ніж використання опори замість attr для нових версій jquery.
Кріс О

32

Для jquery 1.6+ використовуйте .prop()замість .attr(),

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

або

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

2
Ви маєте рацію, але деякий час підтримуєте роботу, а деякий час не працюєте, особливо з-за прапорця та
радіо-кнопки

я розумію, що це стара тема, але це видає деякі помилки при використанні машинопису
Simon Price

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').attr('disabled', 'disabled');

1

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

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, які також були відключені, тому я вирішив виключити лише видимі поля

//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
Виправте друге речення. Здається, ваш код відключить елементи, що не вводяться, але тоді він говорить, що це вплине лише на елементи введення. Проясніть, будь ласка, своє значення. (Акуратний трюк, до речі - хороша відповідь)
ксифік
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.