jQuery - Enable Disable (Toggle) Selectbox onClick Button

Question

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);
    });
});

score 4 · Answer 1 · answered Jun 03 '15 at 13:02

4

Try this:

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

You can check if the #locked has class pulse-icon-unlocked

Demo: http://jsfiddle.net/tusharj/thhxcmso/4/

answered Jun 03 '15 at 13:02

Tushar

85,780
21
159
179

1

Working like a Champ... Thanks **@Tushar** – Reddy Jun 03 '15 at 13:09

score 3 · Accepted Answer · answered Jun 03 '15 at 13:02

3

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

answered Jun 03 '15 at 13:02

Dhaval Marthak

17,246
6
46
68

i like this because rather than just toggling enabled/disabled, it ensures that the div pulse-icon_unlocked class is in sync with the enabled/disabled status. – Brino Jun 03 '15 at 13:06
@Brino True... Thanks :) – Dhaval Marthak Jun 03 '15 at 13:07
1

Wow... **@Dhaval Marthak** this is what exactly I want.. Simple and Perfect.. Thanks... Working like a champ... I am gonna accept your answer... Keep up the good work. – Reddy Jun 03 '15 at 13:08
@Reddy Thank you Reddy, Glad to help :) – Dhaval Marthak Jun 03 '15 at 13:09

score 3 · Answer 3 · answered Jun 03 '15 at 13:05

3

You can use

$('select#signontype').is(':enabled')

to check whether the selectbox is enabled or not. Based on it you can do what you want.

Fiddle

answered Jun 03 '15 at 13:05

logan Sarav

781
6
27

1

Working great.. Thanks @logan – Reddy Jun 03 '15 at 13:09

score 0 · Answer 4 · edited Oct 28 '15 at 08:37

0

$("YourElementID").selectbox('disable') will disable the selectpicker selectbox.

Note: This works fine for selectbox version 0.2. I am not sure about latest versions.

edited Oct 28 '15 at 08:37

Luca Detomi

5,564
7
52
77

answered Oct 28 '15 at 08:32

Balaji Srinivasan

1

jQuery - Enable Disable (Toggle) Selectbox onClick Button

4 Answers4

Fiddle Example