web-dev-qa-db-ja.com

Twitterを有効または無効にする方法Bootstrapボタン？

ボタンをクリックすると無効になり、ajaxリクエストが正常に完了した後に再び有効にするというシナリオを実現しようとしています。

以下は私のコードのスニペットです。

フォーム

<button id="btnSubmit" type="submit" class="btn btn-warning btn-lg">Submit!</button>

Javascript

$('#resForm').validate({
  // disable submit button
  $('#btnSubmit').prop('disabled', true);

  submitHandler: function(form) {
    $.ajax({
      ..... typical ajax stuff .....
      success: function(data) {
        alert(data);
        $('success').html(data);
        // enable reserve button again
        $('#btnSubmit').prop('disabled', false);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // console.log(jqXHR);
      }
    });
  }
});

動作しません。そして、Chromeでコンソールをチェックすると、Uncaught SyntaxError: Unexpected token (。それはどこかで愚かな間違いのように感じます、そして私はそれを理解することができません。 propはjQuery1.6.1以降を対象としていることを読み、1.8.3を使用しています。

javascriptjquerytwitter-bootstrapbutton
8
chongzixin
$('#resForm').validate({


  submitHandler: function(form) {
// disable submit button
  $('#btnSubmit').prop('disabled', true);
    $.ajax({
      ..... typical ajax stuff .....
      success: function(data) {
        alert(data);
        $('success').html(data);
        // enable reserve button again
        $('#btnSubmit').prop('disabled', false);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // console.log(jqXHR);
      }
    });
  }
});

これを試して

10
Shashank

私の答えからSOの別の投稿へ！ 私はもっと簡単で簡単な方法を考えることができません！ ;-)

アンカータグ（リンク）の場合：

<a href="#delete-modal" class="btn btn-danger" id="delete"> Delete</a>

アンカータグを有効にするには：

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

enter image description here

アンカータグを無効にするには：

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

enter image description here

2
oikonomopo

http://jsfiddle.net/ を使用してコードを確認します。

試してください：

$('#resForm').validate({
  submitHandler: function(form) {
// disable submit button
  $('#btnSubmit').prop('disabled', true);
    $.ajax({
      //..... typical ajax stuff .....
      success: function(data) {
        alert(data);
        $('success').html(data);
        // enable reserve button again
        $('#btnSubmit').prop('disabled', false);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // console.log(jqXHR);
      }
    });
  }
});

修正をいじる： http://jsfiddle.net/shree/qB9aW/ 。JSHintはエラーのヒントを提供します。

0
Shree