2

データを投稿する前に検証エラーを警告する条件を備えたこのフォームがあります。問題は、誰かが (おそらく誤って) ダブルクリックしてフォームが送信され、最初のクリックでフォームがクリアされ、2 回目のクリックで「フォームが空です」というアラートが表示されることです。 . だから私が欲しいのは、3秒間クリックしたときにボタンを一時的に無効にすることです。しかし、私が今持っているものは、ボタンを無効にするだけでなく、機能全体を3秒間タイムアウトさせるだけです. どうすればいいですか？これはフォームの簡略版です。ありがとう

$('#send').click(function(){

   var self = $('#send');
       setTimeout(function() {
       self.disabled = false;
   if(!$('#text').val()){
      alert('field empty');
  }else{
        $('#message').html('done');
        $('#text').val('');
    }
  }, 3000);
});
4

3 に答える 3

8

クリック時にボタンを無効にする小さな例を書きました。タイムアウトにより、3000 ミリ秒後にボタンが有効になります。

ワーキングデモ

html:

<input id="text">
<input id="send" type="button" value="send"/>
<div id="message"></div>

Javascript:

$('#send').click(function(){
    var button = $(this);
    button.attr('disabled', 'disabled');
    setTimeout(function() {
         button.removeAttr('disabled');
    },3000);
    if(!$('#text').val()){
       alert('field empty');
       button.removeAttr('disabled');
    }else{
        $('#message').html('done');
        $('#text').val('');
    }
});
于 2013-03-04T17:27:40.817 に答える
2

one()の代わりにjQuery を使用できますclick()。関数が実行されると、バインドが解除されます。
再度有効にしたい場合は、関数の最後にタイムアウトを設定して再バインドできます。

あなたの方法を使用すると、実際にボタンを無効にすることはないようです:

this.disabled = 'disabled';
于 2013-03-04T17:23:46.487 に答える
2

ボタンを正しく無効にしていません。.disabledラップされた DOM 要素ではなく、jQuery オブジェクトにプロパティを設定しています。

試す：

self.prop('disabled', false);

それ以外の：

self.disabled = false;

編集：

実際、上記のコードはボタンを再起動しようとしていました。ボタンを無効にするコードはありませんでした。

また、すぐに検証を実行したいと思います。への呼び出しはsetTimeout()、次のように、ボタンを再度有効にするためのものである必要があります。

$('#send').click(function() {
    var self = $(this);

    // Disable the button.
    self.prop('disabled', true);

    // Process click.
    if (!$('#text').val()) {
        alert('field empty');
    } else {
        $('#message').html('done');
        $('#text').val('');
    }

    // Cause the button to re-enable after 3 seconds.
    setTimeout(function() {
        self.prop('disabled', false);
    }, 3000);
});
于 2013-03-04T17:24:56.587 に答える