ボタン - いずれかのボタンをクリックして作業を停止する方法

-1

私のコードでは、twobuttonsがあります。ユーザーがいずれかをクリックすると、functionが実行されます（すでに動作しています）。もう一度クリックするとは何もしません。ボタン - いずれかのボタンをクリックして作業を停止する方法

私のHTMLコード：

<html> 
<head> 
<meta charset="UTF-8"> 

<title>Demo</title> 
<script src="jquery-3.1.1.js"></script> 
<script src="JS.js"></script> 
<!--script src="JS2.js"></script--> 
</head> 

<body> 
    <p><input type="button" name="click" value="Button I" id="1" onclick="myFunction();"/></p> 
<p><input type="button" name="click" value="Button II" id="2" onclick="myFunction2();"/></p> 

</body> 
</html>

マイ機能コード（.jsファイル）：

function myFunction(xx, xx, numberOrigin){ 
    numberOrigin +=1; 

    $.ajax({ 
    type: 'POST', 
    dataType: "json", 
    contentType: "application/json", 
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
    data: JSON.stringify({ 
      "xxxxxxxxxxx":xxxxxxx, 
      "xxxxxxxxxxxx":xxxxxxxxx, 
      "xxxxxxxxxxxx":"xxxxxxx" 
    }), 
     success:function(output) { 
      console.log(output); 

      otherFunction(xxxxxxxxxxxxxxxx, numberOrigin); 
     }, 
     error:function(output) { 

     } 
    }); 
}

おかげで事前。

出典

2017-01-05 Sayuri Mizuguchi

のように見えるのでしょうか？ – vvtx

ボタンにnbのクリックを保存するためにどのような変数を使用しますか？ボタンの1つがクリックされたのは初めてですか？ – PMerlet

関数の最後に 'disable'を実行します –

：

バージョン1.6未満の使用

$("input[type='button']").attr('disabled','disabled');

については

$("input[type='button']").prop("disable", true)

私は、個人的に、あなたのAJAX呼び出しの前に、あなたの関数の先頭にこれを入れてしまうでしょう。

エラーがある場合は、エラーハンドラの属性を元に戻すことができます。

EDITは、いくつかのテストの後、私はそれが動作しないことにより、あなたは何を意味するのかを見ました。
$("input")[0].disabled = true; 
$("input")[1].disabled = true; 
2つの入力ボタンとテキストボックスがないことを前提としています。

別の方法：
$("input").prop("disabled", true); 
は再びあなたのドキュメントには他の入力がないと仮定。

最後に、マイナーチェンジでオリジナルの答えは、：
$("input[type='button']").prop("disabled", true); 
気づいた「無効」を「無効」に変更されました。

私はこれらをMicrosoft Edgeを使用して試してみましたが、いずれも動作しています。私はあなたが最初のものから始め、あなたのために働く解決策を見つけるまであなたの道を踏み出すことをお勧めします。

あなたがクリックした後、それらを無効にしないのはなぜあなたのコードは、
function myFunction(xx, xx, numberOrigin){ 
    numberOrigin +=1; 

    $("input[type='button']").prop("disabled", true); <-- or one of the other choices here 

    $.ajax({ 
    type: 'POST', 
    dataType: "json", 
    contentType: "application/json", 
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
    data: JSON.stringify({ 
      "xxxxxxxxxxx":xxxxxxx, 
      "xxxxxxxxxxxx":xxxxxxxxx, 
      "xxxxxxxxxxxx":"xxxxxxx" 
    }), 
     success:function(output) { 
      console.log(output); 

      otherFunction(xxxxxxxxxxxxxxxx, numberOrigin); 
     }, 
     error:function(output) { 

     } 
    }); 
} 
乾杯と幸運

出典

2017-01-05 14:23:24

成功関数に追加すると、成功時にのみボタンが無効になります;-)。 – Alexis

成功関数に入れても、ajaxが返す前にユーザーがボタンをクリックすると、再度発射されることはありません。 – Cruiser

@Alexis Agreedしかし、場合によっては、ユーザーはajaxが返される前に2回クリックすることができます。一番上でそれらを無効にすると、その可能性が排除されます。そうでなければ私は確かにあなたに同意する –

JQueryを使用しているので、.one（）関数の使用を検討してください。 http://api.jquery.com/one/

このように使用します。各入力要素からonclick = "myFunction（）"を削除します。次に、あなたの.jsファイルでjQueryを使って：それは、セレクタに一致する各要素に一度発射した後

/**** add this here ****/ 
$(function(){ 
    /* EDIT: I noticed you're wanting to call a different fcn 
     depending on which button is clicked. With my solution you 
     could handle this like so: */ 
    $('input').one('click', function(){ 
     if($(this).attr('id') !== '2') myFunction(); 
     else myFunction2(); 
    }); 
}); 

function myFunction(xx, xx, numberOrigin){ 
    numberOrigin +=1; 

    $.ajax({ 
     type: 'POST', 
     dataType: "json", 
     contentType: "application/json", 
     url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
     data: JSON.stringify({ 
     "xxxxxxxxxxx":xxxxxxx, 
     "xxxxxxxxxxxx":xxxxxxxxx, 
     "xxxxxxxxxxxx":"xxxxxxx" 
    }), 
    success:function(output) { 
     console.log(output); 
     otherFunction(xxxxxxxxxxxxxxxx, numberOrigin); 
    }, 
    error:function(output) { 
     /**** also add here NOTE: in myFunction2() 
      you'll want to call myFunction2 here ****/ 
     $('input').one('click', myFunction); 
    } 
    }); 
}

1（）関数がバインド解除されます。

EDIT：AJAXリクエストでエラーが返された場合は、クリックハンドラをボタンに再接続したい場合があります。その場合は、上記のコードをエラーコールバックに追加して、ユーザーが再度クリックできるようにします。 jqueryの1.6及び使用上記の場合

出典

2017-01-05 14:21:20 Cruiser

良い解決策ではありません。 ajaxの結果がエラーであれば、btnはロックされています... – Alexis

ajaxのエラー処理がボタンの役割であるはずです。 OPは筋肉機能が一度発射されることを望んでいます。 – Cruiser

ボタンが彼が無効になった彼の行動をするときにOPが欲しい。私たちは文脈を持っていません。ボタンがその機能を実行しない場合でも、ボタンはソリューションでブロックされます。 – Alexis

ボタン - いずれかのボタンをクリックして作業を停止する方法

答えて

関連する問題