web-dev-qa-db-fra.com

Cliquer sur une entrée ou un bouton désactivé

Est-il possible de cliquer sur un bouton désactivé et de fournir des commentaires à l'utilisateur?

HTML:

<input type="button" value="click" disabled>

et JavaScript:

$('input').mousedown(function(event) {
    alert('CLICKED');
});

Le code ci-dessus ne fonctionne pas pour moi; ce n'est pas non plus:

$('input').live('click', function () {
    alert('CLICKED');
});
javascriptjquerydisabled-control
21
e1761587

Il n'y a aucun moyen de capturer un clic sur les éléments désactivés. Le mieux est de réagir à un class spécifique sur l'élément.

Balisage HTML:

<input type="button" class="disabled" value="click" />

Code JavaScript:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

Vous pouvez ensuite utiliser le style CSS pour simuler un aspect désactivé:

.disabled
{
    background-color: #DDD;
    color: #999;
}

Voici un jsFiddle démontrant son utilisation.

22
Jesse

Faire le champ readonly peut aider, car l'événement click sera déclenché. Soyez conscient des différences de comportement .

<input type="button" value="click" readonly="readonly" />
16
Dennis Golomazov

Mettre

input[disabled] {pointer-events:none}

dans votre CSS (cela empêche certains navigateurs de supprimer complètement les clics sur les entrées désactivées) et capturez le clic sur un élément parent. C'est une solution plus propre, à mon humble avis, que de mettre une superposition transparente sur l'élément pour capturer le clic, et selon les circonstances, il peut également être beaucoup plus facile que de simplement "simuler" l'état désactivé à l'aide de CSS (car cela n'empêchera pas l'entrée d'être soumis, et nécessite également de remplacer le style par défaut du navigateur "désactivé").

Si vous disposez de plusieurs de ces boutons, vous aurez besoin d'un parent unique pour chacun, afin de pouvoir distinguer le bouton sur lequel vous avez cliqué, car avec pointer-events:none, la cible du clic est le parent du bouton plutôt que le bouton lui-même. (Ou vous pouvez tester les coordonnées du clic, je suppose ...).

Si vous devez prendre en charge les anciens navigateurs, vérifiez ceux qui prennent en charge pointer-events: http://caniuse.com/#search=pointer-events

6
Doin

Vous ne pouvez pas sans une solution de contournement, voir: jQuery détecter cliquez sur le bouton d'envoi désactivé

Les navigateurs désactivent les événements sur les éléments désactivés.

Modifié pour ajouter du contexte à partir du lien:

Le demandeur a trouvé ce fil avec une explication de la raison pour laquelle les événements ne s'enregistrent pas: http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox, et peut-être d'autres navigateurs, désactivent les événements DOM sur les champs de formulaire qui sont désactivés. Tout événement qui commence au champ de formulaire désactivé est complètement annulé et ne se propage pas dans l'arborescence DOM. Corrigez-moi si je me trompe, mais si vous cliquez sur le bouton désactivé, la source de l'événement est le bouton désactivé et l'événement de clic est complètement effacé. Le navigateur ne sait littéralement pas que le bouton a été cliqué, ni ne transmet l'événement click. C'est comme si vous cliquiez sur un trou noir sur la page Web.

La solution de contournement serait de styliser le bouton pour qu'il "ait l'air" désactivé, tout en ne l'étant pas.

4
Andrew Bartel

Les éléments disabled ne permettront pas à l'utilisateur d'interagir avec eux.

Donc: non, vous ne pouvez pas mettre un onclick sur un bouton disabled et vous attendre à ce qu'il se déclenche.

3
Halcyon

vous ne pouvez pas cliquer sur le bouton désactivé, mais vous pouvez cliquer sur le lien désactivé

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>
0
sglazkov

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

L'exemple ci-dessus fonctionne avec JQuery pour les boutons désactivés qui ont besoin que l'événement soit capturé.

0
Lisandro

Qu'en est-il d'envelopper le bouton dans un élément et de cliquer sur cet élément?

<span id="container">
    <input type="button" value="click" disabled>
</span>

Javascript:

$("#container").click(function(){
    alert("Element clicked!");
})
0
Gh61