Comment désactiver un bouton en JQuery
Plusieurs méthodes existent en vue de désactiver un bouton HTML à l'aide la bibliothèque JavaScript.
Pour désactiver un bouton, il faut lui ajouter l'attribut disabled, ce qui rend impossible le clic. Avec JQuery, la méthode prop() peut être utilisée pour désactiver ou activer un bouton :
//Désactive le bouton $(#[identitifiant du bouton]).prop(disabled, true); //Active le bouton $(#[identitifiant du bouton]).prop(disabled, false);
Si votre bouton est situé dans une boîte de dialogue JQueryUI, plusieurs possibilités existent. Si vous souhaitez désactiver tous les boutons de la boîte de dialogue, utilisez l'instruction suivante :
$(:button:contains('Authenticate')).prop(disabled, true).addClass(ui-state-disabled);
Cette instruction désactivera tous les boutons de toutes les boîtes de dialogue de la page. Pour viser une boîte de dialogue en particulier, il faut mettre un identifiant sur la boîte de dialogue et utiliser la méthode find() :
$(#[identifiant de la boîte de dialogue]).parent().find(:button:contains('Authenticate')).prop(disabled, true).addClass(ui-state-disabled);
Si vous souhaitez désactiver un bouton en particulier, vous pouvez récupérer la liste des boutons de la fenêtre avec l'instruction suivante :
var boutons = $(#[identifiant de la boîte de dialogue]).dialog('option', 'buttons');
Vous devrez ensuite parcourir cette liste pour trouver le bouton à désactiver. Une solution plus simple consiste à attribuer un identifiant au bouton lors de la création de la boîte de dialogue :
$(#[identifiant de la boîte de dialogue]).dialog({ buttons: [
{
id: fini
text: Fini,
click: function() { ... }
},
{
id: annuler
text: Annuler,
click: function() { ... }
}
] });
Il ne reste plus alors qu'à utiliser l'identifiant du bouton pour le désactiver :
$(#fini).prop(disabled, true);