web-dev-qa-db-ja.com

無効なボタンはまだクリックイベントをリッスンします

いくつかのjquery検証を行うフォームに問題があります。特定の入力フィールドが入力されていない場合は、無効化された属性を追加することにより、「次へ進む」ボタンを無効化する必要があります。

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

それは機能しますが、そのボタンにもクリックイベントがあります：（coffeescript）

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

私が期待する .btn-move-forwardボタンが無効のときにクリックイベントを発生させませんが、発生させます!!

まず、理由はわかりません。すべてのブラウザー仕様で、これは起こらないはずであると定義されています。とにかく、私は次のことをすることでそれをバイパスしようとしました：

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

またはこれ

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

または、次のようなイベントリスナーを組み合わせます。

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

いいえ、これはすべて正しく機能しません。ボタンは、引き続き「進む」ボタンとして動作します。

無効になっている場合、onclickをリッスンしないボタンのみが必要です。

javascriptjquerycoffeescript
13
DonMB

disabledプロパティはフォーム要素にのみ適用されます。これは、.btn-move-forward要素は<button>または<input type="button">の場合、disabled属性は無効になります。

buttonを使用した実際の例は次のとおりです。

$('.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

代わりにprop()を使用するように変更してください。

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

クリックイベントをオフにしてください

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

無効にする：

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

再度有効にする：

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

clickイベントを無効にするのは良い考えではないと思います。ボタンを有効にすると、clickイベントを再度有効にする必要があるためです。

ために disabled button、私はcheck disabled state、disabledreturnの場合。

HTMLボタン：

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

ボタンを無効にする方法：

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

クリックイベント：

$('.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

私は何年も遅すぎます：Pそれでも誰かが私の答えから助けを得ることができる場合：HTML：

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

JS：

  • 有効にする

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

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

  • 無効にするには

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

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

0
Ravi

ポインターイベントを使用：なし。クリックイベントを必要としない場所

.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