如何禁用引导下拉列表

时间:2013-10-25 12:01:35

标签: javascript jquery html css twitter-bootstrap

我使用bootstrap创建了一个下拉列表。动态地我要禁用并启用下拉列表。

html代码:

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

有些时候我想要禁用,有时我想启用。所以我该怎么做呢。 在这里我还有2个下拉元素。所有都放在singlw div标签中。这里我没有提到div标签ID名称。我只是推出了单个下拉元素代码。

3 个答案:

答案 0 :(得分:7)

是的,通过jquery你可以得到这个:

以下是示例:

http://jsfiddle.net/jV7ye/

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

更新 JS代码:

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

dropdown ID替换为您的ID。感谢

答案 1 :(得分:3)

通过使用jquery,我们可以做到

禁用下拉列表

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

启用下拉列表

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

答案 2 :(得分:-2)

您可以通过在属性上添加if块并在下拉列表中添加禁用的类来执行此操作。

下面是我的div,因为我在IsNewEditDisabled

上有缩略/禁用下拉切换按钮
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         View v = inflater.inflate(R.layout.meat_adobo, container, false);
    Button b=(Button) v.findViewById(R.id.button);
    b.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                 Intent in=new Intent(getActivity(),SecondActivity.class);
    startActivity(in);

            }
        });

    return v;
    }