чи є спосіб відключити всі поля (textarea / textfield / option / input / checkbox / submit тощо) у формі, повідомивши лише ім'я батьківського div у jquery / javascript?
чи є спосіб відключити всі поля (textarea / textfield / option / input / checkbox / submit тощо) у формі, повідомивши лише ім'я батьківського div у jquery / javascript?
Відповіді:
Спробуйте використовувати :input
селектор разом із батьківським селектором:
$("#parent-selector :input").attr("disabled", true);
div
і це все. Якби мені дали більше інформації, я міг би запропонувати більш ефективне рішення.
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
$('#mydiv').find('input, textarea, button')
.
Для jquery 1.6+ використовуйте .prop()
замість .attr()
,
$("#parent-selector :input").prop("disabled", true);
або
$("#parent-selector :input").attr("disabled", "disabled");
$(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);
}
}
Просто цей рядок коду відключить усі елементи введення
$('#yourdiv *').prop('disabled', true);
Як щодо досягнення цього, використовуючи лише атрибут 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');
Я використовую функцію нижче в різних точках. Працює в елементах div або кнопки в таблиці, якщо використовується правильний селектор. Просто ":" кнопка не активувалась для мене знову.
function ToggleMenuButtons(bActivate) {
if (bActivate == true) {
$("#SelectorId :input[type='button']").prop("disabled", true);
} else {
$("#SelectorId :input[type='button']").removeProp("disabled");
}
}
Далі буде відключено весь вхід, але він не зможе його до класу btn, а також додасть клас для заміщення відключення css.
$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');
клас css
.disabledClass{
background-color: rgb(235, 235, 228) !important;
}
Для мене прийнята відповідь не спрацювала, оскільки у мене були деякі приховані чисті поля 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);
Використовуйте клас 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.
Тільки тип тексту
$(".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");
Якщо ваша форма всередині div
просто містить елементи введення форми, то цей простий запит відключить кожен елемент всередині form
тегу:
<div id="myForm">
<form action="">
...
</form>
</div>
Однак він також відключить інші елементи form
, крім елементів введення, в тому, що його ефекти будуть помітні лише на елементах типу введення, тому підходять переважно для кожного типу форм!
$('#myForm *').attr('disabled','disabled');
readOnly
, а не відключення.