web-dev-qa-db-ja.com

jQueryは無効な送信ボタンのクリックを検出します

フィドル： http://jsfiddle.net/ugzux/

ご覧のとおり、無効化された（javascript経由で）送信ボタンがあるフォームがあります。

とにかくクリックイベントをバインドできるようにしたいので、フォームの送信を許可する前に（つまり、ボタンを再度有効にする前に）入力で修正する必要があるものをジャジーに示すことができます。

ただし、送信ボタンを無効にすると、無効になった後にバインドされていても、ボタンにバインドされたクリックイベントも無効になります-これを回避する方法はありますか？

実際には、1つの解決策は、ボタンの無効化を停止し、代わりに

$('form').submit(function(event){
    event.preventDefault(); 
});

ただし、無効化された入力とjavascriptイベントの詳細と、この動作に一度も遭遇したことのない回避策があるかどうかを知りたいです。

jqueryformssubmit
40
totallyNotLizards

これでこれを見つけました 質問 -

Firefox、およびおそらく他のブラウザは、無効になっているフォームフィールドのDOMイベントを無効にします。無効化されたフォームフィールドで開始するイベントは完全にキャンセルされ、DOMツリーに伝播しません。私が間違っている場合は修正しますが、無効なボタンをクリックすると、イベントのソースは無効なボタンになり、クリックイベントは完全に消去されます。ブラウザは文字通りボタンがクリックされたことを知りませんし、クリックイベントを渡しません。 Webページのブラックホールをクリックしているようです。

Divでボタンをラップし、divのクリックイベントでロジックを起動することで、クリックを「偽造」できると思っていました。ただし、上で示したように、無効化された要素のイベントはDOMツリーにバブルアップされていないようです。

47
ipr101

これを実現するための最善の方法は、「無効」クラスを使用してボタンを無効にすることです。その後、jqueryで通常どおりクリックイベントをキャッチできます。 $(this).hasClass('disabled')の場合は、event.preventDefault();とともに「ジャジーな表示」を行います。ユーザーが処理を終えたら、removeClass('disabled')をinput[type="submit"]「ボタン」。簡単！

12
iPadDeveloper2011

送信ボタンの周りにdivを配置し、送信ボタンが無効になっている場合にクリック機能を追加できます。

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
    if (attr('submit-button', 'disabled') == 'true')
    {
        alert('Button Disabled')
    }
});

これは頭​​のてっぺんからのコードなので、正確ではないかもしれません。しかし、あなたはポイントを得る。

7
JackalopeZero
$(document).on('click', '.wrapper-of-disabled-button', function(){
  if ($(this).find('button.disabled').length > 0) {
    // Do your magic on the parent -> $(this)
  }
});

どうぞ ;）

2
Dobromir Penchev

少し複雑ですが、似たようなユースケースがあります：

  1. 画面には多く submit buttonがありますが、デフォルトでは無効になっています
  2. ユーザーが同意チェックボックスをクリックするボタンを有効にする必要がある
  3. 同意チェックボックスはオン/オフを切り替えることができます
  4. チェックボックスをクリックすると、すべての送信ボタンをクリックできます

JQueryを使用して、divでボタンをオーバーラップし、別のdivの代わりにdivをラップする

以下のデモをご覧ください

var toggleNeedConsent = function() {
  var isEnableCheckbox = $('#consent-confirm-checkbox').prop('checked');
  $('.needConsentButton').prop('disabled', !isEnableCheckbox);
  if (!isEnableCheckbox) {
    if (!$(".needConsentButtonOutterDiv").length) {
      $('.needConsentButton').wrap("<div class='needConsentButtonOutterDiv' style='display: inline-block; position:relative'></div>");
    }
    $('.needConsentButton').after('<div class="needConsentButtonDiv" style="position:absolute; top:0; left:0; width: 100%; height:100%; ;"></div></div>');

    $('.needConsentButtonDiv').click(function(e) {
      alert('Please accept the consent first');
    })
  } else {
    $(".needConsentButtonDiv").remove();
  }
}

$(function() {
  toggleNeedConsent();
  $('#consent-confirm-checkbox').click(function() {
    toggleNeedConsent();
  });

  $("#approveButton").click(function() {
    alert('You are a wizard, Harry!');
  })

  $("#approve2Button").click(function() {
    alert('Harry, you are a wizard!');
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click consent checkbox before approve! <input type="checkbox" id="consent-confirm-checkbox">
<br/>
<br/>

<button class="needConsentButton" id="approveButton">Approve Form1!</button>

<br/>
<br/>
<button class="needConsentButton" id="approve2Button">Approve Form2!</button>

このアプローチの良い点：

  • 無効にするボタンのクラスを追加するだけで、他のHTMLは同じままです
  • 一度に複数のボタンに同意できます
  • ボタンは、カスタマイズされた派手な方法を使用する代わりに、実際には無効になっています。これにより、外部ライブラリが理解され、CSSがそれに応じて作成されます。
0
Ng Sek Long

ボタンreadonlyを作成すると、クリックイベントが発生するので役立ちます。 動作の違い に注意してください。

<input type="submit" value="Submit" readonly="readonly" />
0
Dennis Golomazov

必須のチェックボックスを組み合わせた他の回避策は次のとおりです。

<input type="checkbox" class="einwilligung" name="einwilligung" value="ja"/>
<div class="einwilligung_hinweis">U need to check this box</div>
<div class="button_outer">
        <input type="submit" name="submit" value="Senden" id="submitButton" disabled="disabled" class="nope btn" />
        <span class="button_overlay"></span>
 </div>

CSS-マジック

#submitButton{
display:inline-block;
color:#D00019;
width:160px;
z-index:30;
position:absolute;
display:block;
top:0;
left:0;
height:30px;
outline:none;
}

#submitButton.nope{
z-index:10;
color:#333;
}

.button_outer {
width:162px;
height:32px;
z-index:50;
position:relative;
}

span.button_overlay{
display:block;
height:30px;
width:162px;
position:absolute;
top:0;
left:0;
background:#fff;
opacity:0.3;
filter: alpha(opacity=30);
z-index:20;
}

.einweilligung_hinweis_error{
color:red;
}

JQuery-Stuff

(document).ready(function() {

  $('.einwilligung').click(function() {
    var buttonsChecked = $('.einwilligung:checked');
    if (buttonsChecked.length) {
      $('#submitButton').removeAttr('disabled');
      $('#submitButton').removeClass('nope');
      $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
    }
    else {
      $('#submitButton').attr('disabled', 'disabled');
      $('#submitButton').addClass('nope');
    }
  });

  $('.button_outer').click(function(){
     if($('#submitButton').hasClass('nope')){
          $('.einwilligung_hinweis').addClass('einweilligung_hinweis_error');
      }else{
          $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
      }
  });

});

最先端ではないかもしれませんが、かなりうまくいきます！

  • 送信ボタンに高いz-indexを与えるには、チェックボックスをオンにする必要があります
  • そうでない場合は、メッセージを強調表示するために、クリックイベントを含むbutton_overlayが上にあります
0
Marten Brosch

.disabledクラスを使用して要素のスタイルを無効にし、JSコードで.hasClass（ '。disabled'）を使用して必要に応じて処理する必要があります。 「ポインタイベント：なし」を入れない限り、動作するはずです。 .disabledクラスのcssコードでの宣言

0
Milena Beerg

css

[disabled]{
pointer-events:none;
}

html

<span class="button"><input type="submit" disabled /></span>

あなたはボタンをクリックしてこれを試すことができます

$('.button').click(function(){
// do your code here.
});
0
Rajilesh Panoli