Search code examples
jqueryjquery-selectbox

jQuery - Enable Disable (Toggle) Selectbox onClick Button

How can I Toggle a Selectbox between Enable and Disable onClick button...

Scenario: If I click on #locked div, this div should toggle with another class "icon-unclocked" and selectbox should be enabled. If I click on "#locked" again, selectbox should be disabled and "icon-unclocked" has to be removed.

First part (toggleClass) is working great.. but having problem in enable / disable selectbox...

FIDDLE

Please check the code below...

HTML:

<div class="icon-locked" id="locked">&nbsp;</div>
<select class="form-control" id="signontype" disabled>
  <option>Option 01</option>
  <option>Option 02</option>
</select>

jQuery:

$(document).ready(function(){
    $( "#locked" ).click(function() {
      $( this ).toggleClass( "icon-unlocked" );
      $('select#signontype').prop('disabled', false);
    });
});
Solution

  • You just need to check if your locked div contains pulse-icon-unlocked class with .hasClass()

    $( "#locked" ).click(function() {
    $( this ).toggleClass( "pulse-icon-unlocked" );
    $('select#signontype').prop('disabled', !$(this).hasClass("pulse-icon-unlocked"));
});

    Fiddle Example