jQuery -启用禁用(切换)选择盒onClick按钮

Question

如何在启用和禁用onClick按钮之间切换一个选择框.

场景:如果我单击#locked div，这个div应该与另一个类"icon-unclocked“切换，并且应该启用选择箱。如果我再次单击"#locked“，则应禁用选择框，并删除"icon-unclocked”。

第一部分(toggleClass)工作得很好。但是在启用/禁用选择箱时有问题.

小提琴

请检查下面的代码..。

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

Answer 1

您只需检查锁定的div是否包含带有pulse-icon-unlocked的.hasClass()类。

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

小提琴例子

Answer 2

试试这个：

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

您可以检查#locked是否有pulse-icon-unlocked类。

演示：http://jsfiddle.net/tusharj/thhxcmso/4/

Answer 3

您可以使用

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

若要检查是否启用选择框，请执行以下操作。基于它，你可以做你想做的事。

小提琴