Как определить, включено или отключено текущее состояние экземпляра Select2? - PullRequest
Новая
       11

Как определить, включено или отключено текущее состояние экземпляра Select2?

1 голос
/ 14 июня 2019

Предположим, у меня есть элемент 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, а затем отключил его.Тем не менее, как я могу получить его текущее состояние как включено или отключено?

Спасибо

Ответы [ 3 ]

1 голос
/ 14 июня 2019

Вы можете включить или отключить входы с атрибутом 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>
0 голосов
/ 14 июня 2019

Вы можете использовать $('#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>
0 голосов
/ 14 июня 2019

Согласно документации логика disabled для Select2 просто устанавливает свойство disabled для самого элемента select.

Таким образом, вы можете проверить состояниеэтого имущества: 

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