web-dev-qa-db-ja.com

一度クリックした後にボタンを無効にする

ユーザーが2回以上クリックできないように、ボタンがクリックされたら無効にする必要があります。 （私のアプリケーションはMVC ASP.NETで記述されていますが、通常のASP.NETアプリケーションでこれを行いました。）

JavaScriptとjQueryを使用してみましたが、機能しません。ボタンは無効になっていますが、フォームは送信されていません。

jQuery：

$("#ClickMe").attr("disabled", "disabled");

JavaScript：

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';
}

どちらの方法もうまく機能しますが、フォームは送信されません。

javascriptjqueryasp.net-mvc
41
batwadi

jQueryには .one() 関数があり、特定のイベント（「送信」など）を1回の発生に制限します。

例：

_$('#myForm').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled','disabled');
});
_

このコードを使用すると、フォームを一度送信してからボタンを無効にできます。 find（）関数のセレクターを無効にするボタンに変更します。

注：Francisco Goldenstein氏により、セレクターをフォームに変更し、送信するイベントタイプを変更しました。これにより、送信時にボタンを無効にしたまま、どこからでも（ボタン以外の場所）フォームを送信できます。

注2：gorelogごとに、attr('disabled','disabled')を使用すると、フォームが送信ボタンの値を送信できなくなります。ボタンの値を渡したい場合は、代わりにattr('onclick','this.style.opacity = "0.6"; return false;')を使用してください。

51
Preston Badeer

ユーザーがボタンをクリックした直後にdisabled = "disabled"を設定し、そのためにフォームが送信されない場合、次の2つを試すことができます。

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled

正直に言って、これよりももっと良い方法があると思います。

11
Warty

jQuery .one()は、クリックイベントではなく、後述のsubmitイベントで使用する必要があります。

 $('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });
11
Francisco Goldenstein
$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

ボタンを選択し、そのIDまたはテキストまたはクラスによって...最初のクリック後に無効になり、20ミリ秒後に有効になります

ポストバックで非常にうまく機能し、マスターページに配置し、onclientClickのように暗黙的に呼び出さずにすべてのボタンに適用します。

4
Nare Vellela

「1回」で、モダンなJsイベントを使用してください！

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

ドキュメント 、 CanIUse

3
Gibolt
protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }
1
AbdelMoniem

MVC NET Coreでフォームを送信するには、[〜＃〜] input [〜＃〜]を使用して送信できます。

<input type="submit" value="Add This Form">

ボタンにするために、私はBootstrap=を使用しています。

<input type="submit" value="Add This Form" class="btn btn-primary">

MVC NET Coreで重複したフォームを送信しないようにするには、onclickイベントを追加し、this.disabled = true;を使用してボタンを無効にします。

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

フォームが有効かどうかを最初に確認してからボタンを無効にする場合は、最初にthis.form.submit（）;を追加します。したがって、フォームが有効な場合、このボタンは無効になります。有効にすると、検証時にフォームを修正できるようになります。

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

this.value = 'text';を使用してすべての検証が正しい場合、フォームを送信しているというテキストを無効なボタンに追加できます。

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = 'Submitting the form';">
1
Robert Stepien

送信ボタンを無効にするには、送信ボタンに無効な属性を追加するだけです。

$("#btnSubmit").attr("disabled", true);

無効なボタンを有効にするには、無効な属性をfalseに設定するか、無効な属性を削除します。

$('#btnSubmit').attr("disabled", false);

または

$('#btnSubmit').removeAttr("disabled");
0
KIBOU Hassan

シンプルだと思う

<button id="button1" onclick="Click();">ok</button>
<script>
    var buttonClick = false;
    function Click() {
        if (buttonClick) {
            return;
        }
        else {
            buttonClick = true;
            //todo
            alert("ok");
            //buttonClick = false;
        }
    }
</script>

一度実行したい場合:)

0
danial y