title: How to enable/disable an html button based on scenarios?
body: <p>I have a button in my webpage with below code -</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.checkout-button{
  width: 130px;
  height: 35px;
  background: url('../poc2/images/checkout.png') no-repeat;
  border: none;
  vertical-align: top;
  margin-left:35px;
  cursor:pointer;
  }
  </code></pre>
  
  <p>Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.</p>
  
  <p>What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:</p>
  
  <pre><code>if flag=1: 
      /* enable the button, and let the user click it and run the php code */
  else: 
      /* display this button, but don't let any actions take place if the user clicks on it; */
  </code></pre>
  
  <p>How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.</p>