单击后如何在固定的时间间隔内禁用单选按钮？

Question

Hi guys,

    <input type="radio" value="LIKE" onclick="func(this.value)">LIKE
    <br>
    <input type="radio" value="OK" onclick="func(this.value)">OK
    <br>
    <input type="radio" value="DISLIKE" onclick="func(this.value)">DISLIKE
    <br>

I want to disable all the radio buttons when one of it is clicked and then to enable it after a fixed interval of time.

Answer 1

Here is an example how you could do it if you don't mind using jQuery. You can use the HTML attribute disabled to disable the radios when they are clicked and then use setTimeout to enable them again after a set amount of time. Below time is set to 3000 milliseconds.

$('document').ready( function() {
    $('input').on('click', function(){
        $('input').attr('disabled',true);

        setTimeout(function() {
            $('input').attr('disabled',false);
        }, 3000);
    });    
});

http://jsfiddle.net/0912shz0/1/

Answer 2

You could try code like:-

$('#like, #unlike, #dislike').click(function(){
        $("#like, #unlike, #dislike").attr("disabled",true);

   setTimeout(function(){
        $("#like, #unlike, #dislike").attr("disabled",false);
   },2000);
})

HTML

 <input type="radio" value="LIKE" id="like" >LIKE
 <input type="radio" value="OK"  id="unlike">OK
 <input type="radio" value="DISLIKE" id="dislike">DISLIKE

DEMO here (JSFiddle)

Answer 3

What you need is a timer, using setTimeout :

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

And in the body of the function you would need to know how to use the disabled attribute in javascript:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled

And you would not need to pass this.value to the function, what you would need is this - which would be the element you want to disable, or event - the event which contains the element at event.target . Note: if you pass the event parameter you would need to use cross-browser code so that it works in different browsers. For example:

function(event) {
    //short-hand for: if(event) event=event; else event=window.event;
    event = event || window.event; 
    // your code here
}

Answer 4

$('input[type="radio"]').click(function(){
     $(this).attr('disabled', true);

     setTimeout(function() {
          $('input[type="radio"]').attr('disabled', false);
    }, /*time interval in ms*/)
});

not tested, written from head

Answer 5

Working for me

    <script>
    function func(thisValue){
        setTimeout(function() {
          $('input[type=radio]').attr("disabled",true);
           $('input[type=radio]').removeAttr("checked");

           $('input[value='+thisValue+']').attr("disabled",false);
           $('input[value='+thisValue+']').attr("checked","checked");
           $('input[value='+thisValue+']').prop('checked', true);

        }, 100);
    }
    </script>

HTML

    <label onclick="func('LIKE')" style="position:relative"><input type="radio" value="LIKE" >LIKE</label>
    <label onclick="func('DISLIKE')" style="position:relative"><input type="radio" value="DISLIKE">DISLIKE</label>