javascript - クリック時に画像リンクを無効にする

Question

ページにリンクする画像があります。これは、実行に最大 20 秒かかるプロセス ボタンです。ユーザーが複数回押しないようにしたい。

ボタンが押されたときにハイパーリンクをたどりますが、ボタンのリンクが無効になり、画像が変わるJavascriptをどのように記述しますか?

Answer 1

<script>
function buttonClicked()
{
    document.getElementById('buttonImage').src = 'new-image.jpg';
    document.getElementById('buttonId').disabled = true;
}
</script>

<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>

Answer 2

クリックしたら、要素hrefから属性を削除します。a

Answer 3

あなたの質問から、あなたの「ボタン」はあなたがクリックした画像のように聞こえます...それが本当なら、あなたは以下を使うことができます：

<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>

次に、JavaScriptは次のようになります。

document.getElementById('my_link').onclick = function() {
  document.getElementById('my_link').disabled = true;
  document.getElementById("my_image").src='the_path_to_another_image';
};

Answer 4

これを使用できます。

<script>
function hideme()
{
    $("#buttonImage").hide();
}
</script>

<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>

画像を非表示にしたくない場合は、これを使用してください。

$('#buttonImage').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

これにより、指定された href にアクセスするというハイパーリンクのデフォルトの動作が妨げられます。

Answer 5

ここにあなたのための本当に簡単なものがあります

あなたのJSで

function Create(){ 
document.write('<INPUT disabled TYPE="button" value="Click Me!">'); 
}

あなたのHTMLで

<INPUT TYPE="button" value="Click Me!" onclick="Create()"> 

jQuery を使用する準備ができている場合は、別の解決策があります。

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

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

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

Answer 6

私は次のように行きました：

$(document).ready(function() {
  var isSubmitted = false;
  $("#submit").click(function(e) {
    if ( ! isSubmitted ) {
      isSubmitted = true;
      var src = $(this).attr("src").replace("gold","red");
      $(this).attr("src", src);    
    } else {
      e.preventDefault();
    }
  });
});

Answer 7

jquery プラグインを作成しましょう:

    $.fn.onlyoneclick=function(o){
      var options=$.extend({src:"#"},o);
      $(this).click(function(evt){
        var $elf=$(this);
        if( $elf.data("submitted") ){
          evt.preventDefault();
          return false;        
        }
        $elf.attr("src", typeof(options.src) == 'function' ? 
                          options.src($elf.attr("src"))
                        : options.src
                ).data("submitted",true);
      });
    }

    $(".onlyoneclick").onlyoneclick({
      src : function( src ){
          return  src.replace("gold","red");
      }
    })

一度だけトリガーする必要があるボタンで：

    <button ... class="onlyoneclick">tatatata... </button>

Answer 8

そのシンプルな...たった1行のコード:)

Onclick return false.