Button disable/enable onclick

Question

I have 2 buttons like this :

$body .= '<a href="#" onclick="check();" id="check">Check </i></a>';
$body .= '<a  href="#" onclick="continue();" id="cont">Continue </a>';

I want that the Continue button is disable if the user don't click on the Check button.

I have this :

    $('#cont').click(function(){return false; });
$('#check').click(function() {
    $('#cont').unbind('click');
});

But when I click on the Continue button (before click on the check) The href don't work it's good but the onclick work ! How I can disable the onclick with the href. Thank you

Answer 1

you can use this

$body .= '<a href="#" onclick="check();" id="check">Check</a>';
$body .= '<a  href="#" onclick="continue();" id="cont" disabled>Continue </a>';

and jquery code

 $(document).ready(function(){
    $('[name^="check"]').change(function() {   
        if( $('#cont').prop('disabled'))
         $('#cont').prop('disabled',false);
        else
            $('#cont').prop('disabled',true);
    });    

});

you can use this link http://jsfiddle.net/DC3EH/101/

Answer 2

You can use jQuery's on and off . Check this fiddle .

Answer 3

Remove onclick attribute from both buttons and use below code, if works

Disable the continue button initially

$body .= '<a href="#" id="check">Check</a>';
$body .= '<a  href="#" id="cont" disabled="disabled">Continue </a>';

$('#check').click(function(e) {
   e.preventDefault();
   $('#cont').prop({disabled:false});
});

Answer 4

My HTML:

<a href="#" onclick="check();" id="check">Check </i></a>
<a href="#" onclick="continueX();" id="cont">Continue </a>

My JS:

function check(){
    //console.log('Check >>>');
    //Whatever you run...
}

function continueX(){
    //console.log('continue >>>');
    //Whatever you run...
}

$('#cont').each(function(){
    //block clicking:
    $(this).click(function(e){e.preventDefault(); return false});

    //Store its current inline onclick property;
    $(this).data('onclick', this.onclick);

    //add a class to identify itself:
    $(this).addClass('disabled');

    //Re-define it:
    this.onclick = function(event) {
        //Restrict click if it has disabled class:
        if( $(this).hasClass('disabled') ){
            return false;
        };

        //otherwise, call inline onclick:
        $(this).data('onclick').call(this, event || window.event);
    };
});

$('#check').click(function(){
    //now allow click:
    $('#cont').unbind('click').removeClass('disabled');
});