CODEWITHSUNDEEP
jqueryjquery-select2
Houy Narun
Houy Narun

Reputation: 1715

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

Suppose I have a Select2 element like below:

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

From above I have initialized Select2 then I disabled it. However, how could I get the current state of it as enabled or disabled?

Thanks

Upvotes: 1

Views: 2060

Answers (3)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

You can enable or disabled inputs with the disabled attribute. The example below shows how you can add this attribute with a click of a button, toggle it, and also check for its presence.

Hope this helps, let me know if you wanted something else.

Demo

// 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>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You can use $('#Role').is(':disabled');: this will check if the select is disabled or not

Also please note that depending on what version of select2 you are using you might want to use $('#Role').select2("enable", false); and not $('#Role').select2('disable')

Working demo

$(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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337627

As per the documentation, the disabled logic of Select2 simply sets the disabled property on the select element itself.

As such, you can check the state of that property:

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

Upvotes: 0

Related Questions