51

それについて多くの質問があることは知っていますが、私はいくつかの解決策を試しましたが、何も機能しません。

私のdjangoアプリには、次のフォームがあります。

<form method='post'>
    <button type='submit'>Send</button>
</form>

ユーザーがフォームを送信したら、ボタンを無効にしたくありません。他の質問を使用して、次のようないくつかのことを試しました。

<button type='submit' onclick="this.disabled=true">Send</button>

クリックするとボタンが無効になりますが、フォームは送信されません。そして、試行するたびに同じ問題が発生しました。ボタンが無効になっているか、フォームが送信されています。両方の方法が見つかりません...

Chromeを使用しています。なぜ私がこの問題を抱えているのかについて何か考えはありますか？ご協力ありがとうございました。

4

15 に答える 15

98

これを試して：

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});
于 2012-11-28T13:50:20.820 に答える
28

私はこれが好きです、DOMを横断する必要はありません。setTimeout関数に関数を配置します。これにより、setTimeoutが0の場合でも、送信および無効化後のボタンが可能になります。

$(document).ready(function () {
$("#btnSubmit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $("#btnSubmit").prop('disabled', true);
}
});
于 2016-04-25T16:20:47.987 に答える
8

親フォームのsubmitイベント時に無効にすることができます。

$("form").on("submit", function () {
    $(this).find(":submit").prop("disabled", true);
});

がロードされた後にのみこのコードを実行するHTMLFormElementようにしてください。そうしないと、何もバインドされません。バインディングが確実に行われるようにするには、document-readyブロック内からこれを起動します。

// When the document is ready, call setup
$(document).ready(setup);

function setup () {
    $("form").on("submit", function () {
        $(this).find(":submit").prop("disabled", true);
    });
}
于 2012-11-28T13:52:28.027 に答える
5

このようなものが機能する可能性があります。

<button id="btnSubmit" type='submit'> Send </button>

<script>
     $("#btnSubmit").on("click", function(e){
          e.PreventDefault();
          $(this).closest("form")[0].submit();
          $(this).prop('disabled',true)
     });
</script>
于 2012-11-28T13:53:38.917 に答える
5

このようにしてみてください

  <input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
于 2012-11-28T13:52:25.360 に答える
2

私の変種、ボタンを無効にします。直接無効にすることはできませんが、表示できるのは非表示です。

<input type="submit" name="namebutton" value="Nahrát obrázek"  onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
于 2013-09-15T18:24:12.220 に答える
2

あなたはこのようなことをすることができます。それは私と一緒にうまくいきます。

<form method='post' onSubmit='disableFunction()'>
// your code here
</form>

次に、スクリプトでこれを追加します

<script>
function disableFunction() {
    $('#btn_submit').prop('disabled', true);
}
</script>
于 2017-05-02T06:40:39.370 に答える
1

これはどう？

onclick="this.style.visibility='hidden';"

無効にするのではなく、非表示にします。

一緒に行きたいならdisabled

onclick="this.style.disabled='true';"
于 2012-11-28T13:55:48.957 に答える
1

Chromeで問題が発生し、フォームを送信していませんでした。たくさんの異なるコードを試してみましたが、これが私にとって最も効果的でした（そして最もよく見えるimo）：

  $('#form_id').submit(function() {
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });

form_idをフォームのIDに置き換えます。もちろん、クラスも機能します。$('.form_class')

出典：JavaScriptコーダー

于 2016-11-11T16:37:09.880 に答える
1

これが私にとって最良の解決策になりました

$("form").submit(function disableSubmit() {
  $("input[type=submit]", this).prop("disabled", true);
});
于 2020-07-27T14:49:13.840 に答える
0

私はこれがもっと好きです：

<script>
    var submit = false;
    $('form').submit(function () {
        if (submit) { return false; }
        else { submit = true;}
    });
</script>

このようにして、Enterキーが複数回送信されるのを防ぎます

于 2014-01-17T15:33:31.547 に答える
0

Chromeを使用しています。なぜ私がこの問題を抱えているのかについて何か考えはありますか？

さて、私がこれを初めて扱ったとき、私はそれを次のように解決しました：

function blockButtons() {
   $('button:submit').click(function(){
    $('button:submit').attr("disabled", true);
   });
}

これは完璧に機能しましたが、MozillaFirefoxでは... Google Chromeは送信しなかったので、次のように変更しました。

function blockButtons() {
   $('button:submit').click(function(){
      var form = $(this).parents('form:first');
    $('button:submit').attr("disabled", true);
    $('button:submit').css('opacity', 0.5);
    form.submit();
   });
}

これはMozillaFirefoxの両方で機能しましたが、その後、古いバージョンのIEを使用している一部のユーザーは2回の送信で問題が発生しました。つまり、javascriptによって開始されたものと、onclickの事実を無視して、とにかく送信するだけのブラウザによるものです。これはe.preventDefaultで修正できると思います。

于 2016-01-22T13:23:00.620 に答える
0

要素をダブルクリックしたくない場合は、.one（）を使用します

<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
 });
});

。1（）

于 2016-08-01T07:24:35.790 に答える
0

あなたはこのようなことをすることができます。それは私と一緒にうまくいきます。

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

ボタンをダブルクリックします。このコードは実行されます

于 2018-12-12T03:08:48.987 に答える
0

フォームが複数回送信されないようにする必要があります。フォームは他の方法で送信される可能性があるため、ボタンを無効にすることは適切な解決策ではありません。

JavaScript：

$('form').submit(function(e) {
    // if the form is disabled don't allow submit
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        return;
    }
    $(this).addClass('disabled');
});

フォームが正しく無効になったら、外観をカスタマイズできます。

CSS：

form.disabled {
    pointer-events: none;
    opacity: 0.7;
}
于 2019-02-01T16:20:30.797 に答える