How can I disable bootstrap dropdown list

Question

I made a dropdown list using bootstrap.Dynamically I want to disable and enable the dropdown list.

html code:

  <div class="span3 offset1">
        <select name="primary" class="select-block" id="select_alert" style="display: none;">
            <option "selected"="">Choose Alert T</option>                         


    <option value="T1">T1</option>

    <option value="T2">T2</option>

    <option value="T3">T3</option>

    <option value="T4">T4</option>

</select>
<div class="btn-group select select-block">
  <i class="dropdown-arrow dropdown-arrow-primary"></i>
  <button class="btn dropdown-toggle clearfix btn-primary" data-toggle="dropdown" id="select_alert">
    <span class="filter-option pull-left">Choose Alert T</span>&nbsp;
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-primary" role="menu">
    <li rel="0" class="selected">
      <a tabindex="-1" href="#" class="">
        <span class="pull-left">Choose Alert T</span>
      </a>
    </li>
    <li rel="1">
      <a tabindex="-1" href="#" class="">
        <span class="pull-left">T1</span>
      </a>
    </li>
    <li rel="2">
      <a tabindex="-1" href="#" class="">
        <span class="pull-left">T2</span></a>
    </li>
    <li rel="3">
      <a tabindex="-1" href="#" class="">
        <span class="pull-left">T3</span>
      </a>
    </li>
    <li rel="4">
      <a tabindex="-1" href="#" class="">
        <span class="pull-left">T4</span>
      </a>
    </li>
  </ul>
  </div>
</div>

some times I want to disable and sometimes I want to enable.So How can I do this. In this I have 2 more dropdown elemnts.All are placed in singlw div tag.Here I didn't mention that div tag id name.I just putted single dropdown element code.

Add a disabled class to the button. duplicate of this

Michael Kunst
– Michael Kunst

2013-10-25 12:15:08 +00:00
Commented Oct 25, 2013 at 12:15 — Michael Kunst
– Michael Kunst, Commented Oct 25, 2013 at 12:15

JERRY-the chuha · Accepted Answer · 2013-10-25 13:28:57Z

8

Yes, by jquery you can get this:

Here is the example:

http://jsfiddle.net/jV7ye/

$(document).ready(function() {
    $("#chkdwn2").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown").prop("disabled", true);
       } else {
          $("#dropdown").prop("disabled", false);  
       }
    });
});

UPDATED JS CODE as per your need:

$(document).ready(function() {

        if(!$("#chkdwn2").is(":checked"))
        {
            $("#dropdown").prop("disabled",true);
        }

        $("#chkdwn2").click(function() {
           if ($(this).is(":checked")) { 
              $("#dropdown").prop("disabled", false);
           } else {
              $("#dropdown").prop("disabled", true);  
           }
        });
    });

Replace dropdown id with your id. Thanks

edited Oct 25, 2013 at 13:28

answered Oct 25, 2013 at 12:32

JERRY-the chuha

5821 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2873816 Over a year ago

I your jsFiddle code,interchange trur->false and false->true.That means Initially I want to disabled.it's not working.

JERRY-the chuha Over a year ago

Have you clicked on "Run" after interchanging true and false?

JERRY-the chuha Over a year ago

Please paste this code in javascript and try again: $(document).ready(function() { if(!$("#chkdwn2").is(":checked")) { $("#dropdown").prop("disabled",true); } $("#chkdwn2").click(function() { if ($(this).is(":checked")) { $("#dropdown").prop("disabled", false); } else { $("#dropdown").prop("disabled", true); } }); });

Sridhar R · Accepted Answer · 2013-10-25 12:21:30Z

3

By using jquery we can do

Disable Dropdown

$('.select_alert').attr('data-toggle','');

Enable Dropdown

$('.select_alert').attr('data-toggle','dropdown');

answered Oct 25, 2013 at 12:21

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

3 Comments

user2873816 Over a year ago

Initially I want to dropdowns after than enable.I tried your code in web-console page.it's working fine.that same code I pasted in my .js file.here it's not working.

Sridhar R Over a year ago

you dont need to paste on js file.write seperate function to enable and disable and call that function sure it work

user2873816 Over a year ago

I made a function, Initially I passed data-toggle value is null("") to that function.If I call function I am getting the following error. Uncaught TypeError: Cannot call method 'setAttribute' of undefined .

Catalyst · Accepted Answer · 2022-08-15 15:14:37Z

0

If above solutions does not work for you, the try

$('#yourDropDownElement').prop('disabled', true).trigger('chosen:updated');

I'm using boostrap v 3.3.6

answered Aug 15, 2022 at 15:14

Catalyst

4376 silver badges14 bronze badges

Comments

Vishwanath · Accepted Answer · 2015-08-18 09:31:44Z

-2

You can do this by add if block on the property and add disabled class to the drop down.

below is my div in that i have eanbled/disabled dropdown toggle button on IsNewEditDisabled

<button ng-if="!IsNewEditDisabled" class="btn dropdown-toggle" ng-class="{open: status.isopen}" dropdown-toggle>
                                <i class="fa fa-pencil"></i><span class="caret"></span>
                            </button>
                            <button ng-if="IsNewEditDisabled" class="btn dropdown-toggle disabled" ng-class="{open: status.isopen}" dropdown-toggle>
                                <i class="fa fa-pencil"></i><span class="caret"></span>
                            </button>

edited Aug 18, 2015 at 9:31

Vishwanath

6,0146 gold badges40 silver badges59 bronze badges

answered Aug 18, 2015 at 9:04

rajkjaiswal

1

Collectives™ on Stack Overflow

How can I disable bootstrap dropdown list

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related