禁用Div“按钮”，然后启用

Question

I am trying to " disable " a div when the page loads, and then a few seconds later enable it. The effect I want to have is make the onclick return false for a few seconds, and have the opacity low. After the timer is up, I want the opacity to return to 1 and the onclick to be set to a function that sets the window.location.href to proceed.html. It's basically a button that is disabled for a few seconds, and then it is enabled.

Here is what I have:

    <div id="proceed">
    <a class="buttonlink" href="" ></a>
    <div class="button" id="button" style="opacity:0.4;filter:alpha(opacity=40);"></div
    </a>
    </div>

Js:

<script type="text/javascript">
    function showBuyLink() { 
    document.getElementById("button").style.opacity = "1.0";
    element.style.filter  = 'alpha(opacity=100)';
    var link = document.getElementsByClassName("button");
    links[0].onclick = function() {
        window.location.href = "proceed.html";
    }
    } 
    setTimeout("showBuyLink()", 5000); </script>

The onclick doesn't work, but the opacity does. Any help?

Answer 1

If you want to set button to enabled only after the page is loaded use the java script function document.onLoad() refer: http://www.w3schools.com/jsref/event_onload.asp

1)First set the opacity to 0.4 on HTML

2)On document.onLoad() since it runs after the whole page is loaded set opacity to 1 and also bind the click function then refer: http://www.w3schools.com/jquery/event_bind.asp

Answer 2

Try this.

Note: Do not forget to include jquery.js

<script type="text/javascript">
$(document).ready(function(){
    $('#yourDivId').find('button').each(function () {
                    $(this).prop('disabled', true);
         });
    showBuyLink()
        $('#yourDivId').find('button').each(function () {
                    $(this).prop('disabled', false);
         });
    } 
    setTimeout("showBuyLink()", 5000); 
});
</script>