找到你要的答案

Q:Javascript: Disable the click event for 1 second after an ID is clicked

Q:JavaScript:禁用的单击事件1秒后身份被点击

Title pretty much describes my problem. I just need to disable the click event for precisely one second, so that I couldn't click on any other buttons on the webpage for that small duration. After the time gets over, I could click anywhere again.

Disabling other buttons for that one second is also acceptable.

Title pretty much describes my problem. I just need to disable the click event for precisely one second, so that I couldn't click on any other buttons on the webpage for that small duration. After the time gets over, I could click anywhere again.

禁用其他按钮的一秒钟也可以接受。

answer1: 回答1:

Try like,

$('#id').on('click',function(){
    // let a common class(disable-btn) for each button which should be disabled for on second
    $('.disable-btn').prop('disabled',true);
    setTimeout(function(){
       // enable click after 1 second
       $('.disable-btn').prop('disabled',false);
    },1000); // 1 second delay
});

$('#id').on('click', function() {
  // let a common class(disable-btn) for each button which should be disabled for on second
  $('.disable-btn').prop('disabled', true);
  setTimeout(function() {
    // enable click after 1 second
    $('.disable-btn').prop('disabled', false);
  }, 1000); // 1 second delay
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="id">Click to disable other for 1 second</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button>Will not Disable</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>

You can disable the #id button itself by adding a class="disable-btn"

试着喜欢,

$('#id').on('click',function(){
    // let a common class(disable-btn) for each button which should be disabled for on second
    $('.disable-btn').prop('disabled',true);
    setTimeout(function(){
       // enable click after 1 second
       $('.disable-btn').prop('disabled',false);
    },1000); // 1 second delay
});

$('#id').on('click', function() {
  // let a common class(disable-btn) for each button which should be disabled for on second
  $('.disable-btn').prop('disabled', true);
  setTimeout(function() {
    // enable click after 1 second
    $('.disable-btn').prop('disabled', false);
  }, 1000); // 1 second delay
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="id">Click to disable other for 1 second</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button>Will not Disable</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>

你可以通过添加class=“禁用按钮“禁用# ID按钮本身

answer2: 回答2:
    <!DOCTYPE html>
    <html>
    <body>

    <p>A script on this page starts this clock:</p>

    <p id="demo"></p>

    <script>

    function disableBtns() {
    document.getElementById("btn1").disabled = true; 
    document.getElementById("btn2").disabled = true; 
    var timer = setInterval(function(){enableBtns()},1000);
    //1000 means 1000 milliseconds
    }

    function enableBtns(){
    document.getElementById("btn1").disabled = false; 
    document.getElementById("btn2").disabled = false; 
    clearInterval(timer); 
    }
    </script>

    </body>

    <button id ="btn1" type="button" onclick="disableBtns()" >Button                            1</button>
    <button id ="btn2" type="button" onclick="disableBtns()" >Button                 2</button>
    </html>
    <!DOCTYPE html>
    <html>
    <body>

    <p>A script on this page starts this clock:</p>

    <p id="demo"></p>

    <script>

    function disableBtns() {
    document.getElementById("btn1").disabled = true; 
    document.getElementById("btn2").disabled = true; 
    var timer = setInterval(function(){enableBtns()},1000);
    //1000 means 1000 milliseconds
    }

    function enableBtns(){
    document.getElementById("btn1").disabled = false; 
    document.getElementById("btn2").disabled = false; 
    clearInterval(timer); 
    }
    </script>

    </body>

    <button id ="btn1" type="button" onclick="disableBtns()" >Button                            1</button>
    <button id ="btn2" type="button" onclick="disableBtns()" >Button                 2</button>
    </html>
javascript  jquery  events  click