web-dev-qa-db-fra.com

Le bouton désactivé écoute toujours l'événement de clic

J'ai un problème sous une forme où je fais des validations jquery. Si un champ de saisie spécifique n'est pas rempli, il doit désactiver un bouton "pas en avant" en ajoutant un attribut désactivé:

if errors
  $('.btn-move-forward').attr("disabled", true)

cela fonctionne, mais j'ai également un événement de clic sur ce bouton: (coffeescript)

$('.btn-move-forward').click ->
  $('#step2, #step3').toggle()

Je m'attends à .btn-move-forward pour ne pas déclencher l'événement click lorsque le bouton est désactivé mais il le fait !!

Premièrement: je ne comprends pas pourquoi, car chaque spécification de navigateur définit que cela ne doit pas se produire. Quoi qu'il en soit, j'ai essayé de le contourner en faisant les choses suivantes:

$('.btn-move-forward').click ->
  if !$(this).is(:disabled)
    $('#step2, #step3').toggle()

ou ca

$('.btn-move-forward').click ->
  if $(this).prop("disabled", false)
    $('#step2, #step3').toggle()

ou en combinant les auditeurs d'événements comme ceci:

$('.btn-move-forward').on 'click', '.btn-move-forward:enabled', ->
   $('#step2, #step3').toggle()

Non, tout cela ne fonctionnera pas correctement. Le bouton se comporte toujours comme un bouton d'avancement.

Tout ce que je veux, c'est que le bouton n'écoute pas onclick s'il est désactivé.

javascriptjquerycoffeescript
13
DonMB

La propriété disabled ne s'applique qu'aux éléments de formulaire. Cela signifie qu'à moins que le .btn-move-forward l'élément est un <button> ou <input type="button"> alors l'attribut disabled n'aura aucun effet.

Vous pouvez voir un exemple de travail utilisant un button ici:

$('.btn-move-forward').prop("disabled", true).click(function() {
  console.log('Moving forward...');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="btn-move-forward">Move forward</button>
16
Rory McCrossan

Modifiez-le pour utiliser à la place prop().

$('.btn-move-forward').prop("disabled", true)
4
Luka Jacobowitz

Veuillez désactiver l'événement Click

$('.btn-move-forward').off('click');
4
Rohit

pour désactiver:

$('.btn-move-forward').prop("disabled", true);

pour réactiver:

$('.btn-move-forward').removeClass('disabled'); // do this also.
$('.btn-move-forward').prop("disabled", false);
3
Pasindu Jayanath

Je pense que la désactivation de l'événement click n'est pas une bonne idée. Parce que vous devez réactiver l'événement click, si vous activez le bouton.

Pour disabled button, Je viens de check disabled state, si disabledreturn.

Bouton HTML:

<span class="btn btn-sm btn-primary btn-move-forward">Book</span>

Comment désactiver le bouton:

$('.btn-move-forward').addClass('disabled');

Cliquez sur l'événement:

$('.btn-move-forward').on('click', function(){
  if($(this).hasClass('disabled')) { 
    console.log('-- Button is disabled. Return from here. --');
    return false;
  }

  // write code for click event here
  $('#step2, #step3').toggle()
});
0
mahfuz

Je suis trop en retard de trop d'années: P Toujours si quelqu'un peut obtenir de l'aide sur ma réponse: HTML:

<button type="button" id="verifyBtn" class="disabled" onClick="submitForm(this);"></button>

JS:

  • Autoriser

    $j('#verifyBtn').addClass('disabled');

    $j('#verifyBtn').attr('disabled','disabled');

  • Pour désactiver

    $j('#verifyBtn').removeClass('disabled');

    $j('#verifyBtn').removeAttr('disabled','disabled');

0
Ravi

utiliser des événements de pointeur: aucun; où vous n'avez pas besoin d'événements de clic

.btn[disabled]{pointer-events:none;}

document.querySelectorAll(".btn").forEach(btn=>{
    btn.addEventListener("click", e=>{
      alert(e.target.innerText)
    })
})
.btn{
  display:inline-block;
  background: #3f51b5;
  color: #fff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
   0 3px 1px -2px rgba(0,0,0,.2),
   0 1px 5px 0 rgba(0,0,0,.12);
    border: none;
    border-radius: 2px;
    position: relative;
    height: 36px;
    margin: 10px;
    min-width: 64px;
    padding: 0 16px;
    display: inline-block;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    outline: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;   
}

.btn[disabled]{pointer-events:none; opacity:0.5}
<div class="btn">Clickable button</div>
<div class="btn">Clickable 2 button</div>
<div class="btn">Clickable 3 button</div>
<hr />
<div class="btn" disabled>Disabled button</div>
<div class="btn" disabled>Disabled 2 button</div>
<div class="btn" disabled>Disabled 3 button</div>
0
surinder singh