Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Disabling Button click action using jquery and Html

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 341
    Comment on it

    Disabling Button click action and Enabling when checkbox is checked:

    We can disable button click action easily using Html and can enable it using jQuery.

    Html code to disable a button:

    <h1 class="redeem-head">Redeem Portfolio</h1>
    			<p class="subhead">You can redeem your account here by checking the checkbox</p>
    			<p class="msg"><input type="checkbox" id="checkbox" name="prog"> <span>Please check the checkbox to redeem your account</span></p>
    
    			<p><input type="button" value="OK" name="okbtn" id="okbtn" class="r-btn" disabled> // here click action is disabled
    			<input type="button" value="Cancel" name="cancelbtn" id="cancelbtn" class="r-btn"></p>

    We can use disabled property to disable a button click action.

    jQuery code to enable a button and to change its CSS:

    <script type="text/javascript">
    $( window ).load(function() {
    
    	$('#okbtn').css('background-color','#d8d8d8');
    
    });
    	$(document).ready(function(){
    		$('#checkbox').change(function(){
    			if ($('#checkbox').is(':checked') ) {
    		    	document.getElementById("okbtn").disabled = false;
    		    	$('#okbtn').css('background-color','#f05a50');
    		    	// $('#okbtn').hover.css('background-color','#f16a61');
    		    	
    			} 
    			else {
    			    document.getElementById("okbtn").disabled = true;
    			    $('#okbtn').css('background-color','#d8d8d8');
    			   
    			}
    		});
    	});
    	$("#okbtn").hover(function(){
        $(this).css("background-color", "#f16a61");
        }, function(){
        $(this).css("background-color", "#f05a50");
    });
    </script>

    In this jQuery code we are fading button color on window load and until checkbox is not checked by user and enabling its click action when checkbox is checked by user.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: