jquery - jQuery - 启用禁用（切换）选择框 onClick 按钮

Question

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

场景：如果我点击#lockeddiv，这个 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

尝试这个：

$("#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 2

您只需要检查您锁定的 div 是否包含pulse-icon-unlocked与.hasClass()

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

小提琴示例

Answer 3

您可以使用

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

检查选择框是否启用。基于它你可以做你想做的事。

小提琴

Answer 4

$("YourElementID").selectbox('disable')将禁用 selectpicker 选择框。

注意：这适用于选择框版本 0.2。我不确定最新版本。