css disable button

here learn to step by step “css disable button” using JavaScript and jquery with HTML.

jQuery Enable Disable Submit Buttons Example

CSS Code
using “css disable button click”

<button id="btnSubmit" class="btn-css-disable">Get Product Data</button>

<style type="text/css">
    .btn-css-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Buttons disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

Also Read: Online CSS Buttons Generator

HTML Code
using “html disabled=false”

<button type="button" disabled id="cssBtn">Get Product Data</button>

jQuery and Javascript Source code
Tips: “disable buttons css jquery”

//Using Pure Javascript
//Disabling a html button

document.getElementById("cssBtn").disabled = true;
//simple Js Enabling a html button

document.getElementById("cssBtn").disabled = false;


//Using dynamically jQuery
//Disabling a html buttons

$('#cssBtn').attr('disabled','disabled');
//Enabling a html buttons

$('#cssBtn').removeAttr('disabled');

css Code
using “css disabled class”

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #3d3d3d;
}

Read Also:  Download Remote File via PHP CURL

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Pagination with jQuery Ajax PHP and MySQL
  2. Read Also:  Laravel delete foreign key Constraint Using Migration
  3. Read Also:  Laravel Redirect Route with get query string parameters
  4. Read Also:  Advanced jQuery Tips Tricks and Solutions
  5. Read Also:  How to Create, Access and Destroy Sessions in Asp.Net
  6. Read Also:  how to add a visitor counter code javascript HTML?
  7. Read Also:  Get Current User ID from Mysql in Laravel
  8. Read Also:  Laravel Bootstrap Alert (flash message) with Examples
  9. Read Also:  jQuery Disable enable Selector Examples
  10. Read Also:  How to Create, Access and Delete Cookies in VueJS
CLOSEX