如何确定 Select2 实例的当前状态是启用还是禁用？

Question

假设我有一个如下所示的 Select2 元素：

<select id="Role" name="state">
  <option value="admin">Admin</option>
  <option value="user">User</option>
</select>

$(document).ready(function() {
  $('#Role').select2();
  $('#Role').select2('disable');
  var Select2state = $('#Role').select2('state'); // Get current state of Select2 disable or enable
  console.log(Select2state);
});

从上面我已经初始化了 Select2 然后我禁用了它。但是，我怎样才能得到它的当前状态是启用还是禁用？

谢谢

Answer 1

根据 documentation，Select2 的 disabled 逻辑只是在 select 元素本身上设置 disabled 属性。

因此，您可以检查属性:

的状态

var disabled = $('#Role').is(':disabled');

Answer 2

您可以使用 $('#Role').is(':disabled');：这将检查 select 是否为 disabled 或

另请注意，根据您使用的 select2 版本，您可能希望使用 $('#Role').select2("enable", false); 而不是 $('#Role').select2('disable')

工作演示

$(document).ready(function() {
  $('#Role').select2();
  $('#Role').select2("enable", false);
  var Select2state = $('#Role').is(':disabled'); // Get current state of Select2 disable or enable
  console.log(Select2state);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select id="Role" name="state">
  <option value="admin">Admin</option>
  <option value="user">User</option>
</select>

Answer 3

您可以使用 disabled 属性启用或禁用输入。下面的示例显示了如何通过单击按钮添加此属性、切换它以及检查它是否存在。

希望这对您有所帮助，如果您还需要其他东西，请告诉我。

演示

// Initialise select2
$(document).ready(function() {
  $('#Role').select2();
});


// Add click event to toggle button
$("#toggle").click(function() {

  // Check if select is disabled
  if ($("#Role").attr("disabled")) {
    // Remove disabled attribute if it is
    $("#Role").removeAttr("disabled");
  } else {
    // Add disabled attribute if it is not
    $("#Role").attr("disabled", "disabled");
  }

});


// Add click event to check button
$("#check").click(function() {

  // Check if select is disabled and print message
  if ($("#Role").attr("disabled")) {
    console.log("Select is disabled");
  } else {
    console.log("Select is not disabled");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>


<select id="Role" name="state">
  <option value="admin">Admin</option>
  <option value="user">User</option>
</select>


<button id='check'>Check if enabled</button>
<button id='toggle'>Enable/Disabled</button>

如何确定 Select2 实例的当前状态是启用还是禁用？

How can I determine if the current state of a Select2 instance is enabled or disabled?

jquery

jquery-select2

演示