existe-t-il un moyen de désactiver tous les champs (textarea / textfield / option / input / checkbox / submit etc) dans un formulaire en indiquant uniquement le nom div parent dans jquery / javascript?
Essayez d'utiliser le :input
sélecteur, avec un sélecteur parent:
$("#parent-selector :input").attr("disabled", true);
div
et c'est tout. Si on m'avait donné plus d'informations, j'aurais pu trouver une solution plus efficace.
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
$('#mydiv').find('input, textarea, button')
.
Pour jquery 1.6+, utilisez à la .prop()
place de .attr()
,
$("#parent-selector :input").prop("disabled", true);
ou
$("#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);
}
}
Simplement cette ligne de code désactivera tous les éléments d'entrée
$('#yourdiv *').prop('disabled', true);
Que diriez-vous d'y parvenir en utilisant uniquement l'attribut HTML "désactivé"
<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>
Juste en mettant disabled dans le fieldset, tous les champs à l'intérieur de ce fieldset sont désactivés.
$('fieldset').attr('disabled', 'disabled');
J'utilise la fonction ci-dessous à différents moments. Fonctionne dans un élément div ou bouton dans une table tant que le sélecteur droit est utilisé. Le simple ": bouton" ne me réactiverait pas.
function ToggleMenuButtons(bActivate) {
if (bActivate == true) {
$("#SelectorId :input[type='button']").prop("disabled", true);
} else {
$("#SelectorId :input[type='button']").removeProp("disabled");
}
}
La suite désactivera toutes les entrées mais ne pourra pas la classer btn et a également ajouté une classe pour écraser désactiver css.
$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');
classe css
.disabledClass{
background-color: rgb(235, 235, 228) !important;
}
Pour moi, la réponse acceptée n'a pas fonctionné car j'avais des champs cachés asp net qui ont également été désactivés, j'ai donc choisi de désactiver uniquement les champs visibles
//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);
Utilisez la classe CSS pour empêcher de modifier les éléments div
CSS:
.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}
JS:
$('#divName').append('<div class=divoverlay></div>');
Ou ajoutez le nom de la classe dans HTML Tag. Cela empêchera de modifier les éléments div.
Uniquement le type de texte
$(".form-edit-account :input[type=text]").attr("disabled", "disabled");
Uniquement le type de mot de passe
$(".form-edit-account :input[type=password]").attr("disabled", "disabled");
Uniquement le type d'e-mail
$(".form-edit-account :input[type=email]").attr("disabled", "disabled");
Si votre formulaire à l'intérieur div
contient simplement des éléments d'entrée de formulaire, cette simple requête désactivera chaque élément à l'intérieur de la form
balise:
<div id="myForm">
<form action="">
...
</form>
</div>
Cependant, il désactivera également les éléments autres que la saisie d'éléments dans form
, car ses effets ne seront visibles que sur les éléments de type d'entrée, ce qui convient donc principalement à tous les types de formulaires!
$('#myForm *').attr('disabled','disabled');
readOnly
, non désactivées.