正文 

当前位置： 首页 > 问答 >

使用 javascript 禁用引导选择选项

     2023-03-05     170

关键词：

【中文标题】使用 javascript 禁用引导选择选项【英文标题】：disable bootstrap select option using javascript 【发布时间】：2017-07-13 08:08:55 【问题描述】：

我尝试使用 javascript 禁用我的特定引导选择选项。

我知道如何禁用“正常选择选项”，但是当使用引导选择时它不起作用（它被禁用/灰色但我仍然可以选择它） 这里jsfidle

<select name="dropdownBranch" id="dropdownBranch" class="selectpicker" data-live-search="true">
  <option value="0">Choose Number</option>
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select id="pureDropDown">
  <option value="0">Choose Number</option>
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<button onclick="disableDropdown()">disable</button>



function disableDropdown()
var selectobject;
selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled=true;

selectobject=document.getElementById("pureDropDown").getElementsByTagName("option");
    for(z=0;z<selectobject.length;z++)
        selectobject[z].disabled=true;

我也尝试删除特定选项，但发生了同样的情况（在正常下拉菜单上工作，但在引导选择上不起作用）

【问题讨论】：

【参考方案1】：

如here 所述，您需要在更改选项的禁用属性后重新呈现选择选择器。

这应该可以解决问题：(JSFiddle)

function disableDropdown()
    var selectobject;
    selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled = true;
    $('#dropdownBranch').selectpicker('render');

【讨论】：

谢谢，这是工作，但这不适用于使用此patosai.com/projects/tree-multiselect 任何想法的树选择？ $('#dropdownBranch').selectpicker('refresh'); 对于 bootstrap-selectPicker 的更新版本要好得多【参考方案2】：

使用 jQuery

$("#dropdownBranch").attr("disabled", "disabled");

或纯javascript：

function disableDropdown()
    document.getElementById("dropdownBranch").setAttribute("disabled", "disabled");

JSFiddle

【讨论】：

我想要的是禁用特定的选择选项，而不是禁用选择（这将禁用所有选择选项） 哦，在这种情况下，请尝试添加此代码：selectobject=document.getElementById("dropdownBranch").getElementsByTagName("option"); selectobject[3].setAttribute("disabled");，然后再调用$('#dropdownBranch').selectpicker();【参考方案3】：

如上所述使用render 不再有效。正如他们所写的Docs refresh 是更改选项后使用的方法。

要使用 JavaScript 以编程方式更新选择，首先要操作 选择，然后使用刷新方法更新 UI 以匹配 新状态。这在删除或添加选项时是必要的，或者当 通过 JavaScript 禁用/启用选择。

function disableDropdown()
    var selectobject;
    selectobject = document.getElementById("dropdownBranch").getElementsByTagName("option");
    selectobject[3].disabled = true;
    $('#dropdownBranch').selectpicker('refresh');

【讨论】：

【参考方案4】：

试试这个

function disableDropdown()
  var selectobject;
  selectobject=document.getElementById("dropdownBranch");
  selectobject.options[3].disabled=true;

  selectobject=document.getElementById("pureDropDown").getElementsByTagName("option");
for(z=0;z<selectobject.length;z++)
    selectobject[z].disabled=true;

【讨论】：

它不起作用，（这行错误我按下 selectobject.options[3].disabled=true;）【参考方案5】：

哟。你不就是 $.("selectedSelect").css("disabled", "disabled");

好的。我为我的努力不足而道歉。我意识到我的回答是轻率的，所以我选择了更多的努力。编辑：

这是我在你的 jsfiddle 上遇到的。如果我使用 .css、.val、.prop 或 .attr，我会收到错误消息。这让我觉得要么 jquery 对我来说在 jsfiddle 上不能正常工作，要么我做错了什么。

我挖得更深了。我看了一下html。在 jsfiddle 中，在 select 标记上方创建了一个引导组合框。我编辑了值为 3 的组合框 li 以使类“禁用”，并获得了所需的结果。

这使我得到了这段代码：

function disableDropdown()
    var selectobject, optionList;
    selectobject=document.getElementById("dropdownBranch")
    .getElementsByTagName("option");
    selectobject = $("li");
    selectobject[3].addClass("disabled");


    selectobject=document.getElementById("pureDropDown")
    .getElementsByTagName("option");
    for(z=0;z<selectobject.length;z++)
        selectobject[z].disabled=true;

您需要做的是访问引导创建的元素，并修改它以禁用该类。 Bootstrap 应该负责其余的工作。我相信你可以在自己的环境中做到这一点，但是 jsfiddle 很烦人，所以我不会继续研究这个。

【讨论】：

【参考方案6】：

这是一个完整的“Jquery”版本：

  var your_value = 2;
  $('#userSelect').val('').change();
  $(`#userSelect option[value='$your_value']`).prop('disabled', true);
  $('#userSelect').selectpicker('refresh');

【讨论】：

如何动态生成日期选择器引导日期禁用

...【发布时间】：2021-06-1605:49:31【问题描述】：我正在尝试使用ajax调用动态生成禁用的日期，并将结果传递给bootstrapdatepicker的datesDisabled选项，或者将结果传递给beforeShowDay选项，但它不适用于动态创建的数组结果，但 查看详情

在引导日期时间选择器中禁用时间

...Web应用程序中使用引导日期时间选择器，它是用PHP/HTML5和JavaScript制作的。我目前正在使用这里的一个：http://tarruda.github.io/bootstrap-datetimepicker/当我没有时间使用控件时，它不起 查看详情

引导工具提示应在更改选择框上启用

...择选项2时，选项3和选项4按钮应该被禁用。我已尝试以下JavaScript代码，但无法在悬停时禁用/启用工具提示。任何人都可以帮助我实现这一点，并放弃您的cmets以 查看详情

引导程序：无法/禁用 <a> 使用 javascript 的链接引导程序

】引导程序：无法/禁用<a>使用javascript的链接引导程序【英文标题】：bootstrap:unable/disable<a>linkbootstrapusingjavascript【发布时间】：2013-07-1017:20:46【问题描述】：这是一个活动链接<ahref="#"class="btnbtn-large">Link</a>如何... 查看详情

如果为空选择选项，则单击按钮时显示模式引导

...】：我通过单击删除按钮（从选择标记中删除选项）通过JavaScript显示了一个模式。我必须在显示警报模式之前检查是否选择了一个选项，但即使没有选择任何内容，我也找不到隐藏警报模式的方法。我使用了一个JavaScr 查看详情

引导选择通过值禁用

...sabled【发布时间】：2021-08-1707:17:35【问题描述】：我正在使用引导选择，https://developer.snapappointments.com/bootstrap-select/if($(\'#po_currency\').val()==$(\'#business_currency\').val())$(\'.ta 查看详情

Angular：引导程序无法触发选择选项，因为选项是使用 ngFor 动态绑定的

】Angular：引导程序无法触发选择选项，因为选项是使用ngFor动态绑定的【英文标题】：Angular:bootstrapfailstotriggerselectoptionasoptionsaredynamicallybindedusingngFor【发布时间】：2019-11-0610:34:25【问题描述】：我有一个在我的组件中动态加载... 查看详情

如何使用 jquery 在选择框中启用/禁用选项

】如何使用jquery在选择框中启用/禁用选项【英文标题】：HowdoIenable/disableoptionsinSelectBoxusingjquery【发布时间】：2012-06-1219:01:52【问题描述】：我有一个选择框，其中包含使用php动态生成的选项和optgroup。现在，当我选择“全部”... 查看详情

如何在小屏幕上禁用引导对齐选项卡的堆叠

...但作为新用户，我无法发表评论要求澄清。我在Bootstrap中使用合理的导航选项卡，并且不希望它们堆叠在小屏幕上，因为我只有2个选项卡。我希望它们并排保持，只是缩小以适应屏幕。这就是 查看详情

在 laravel 4 中使用引导日期选择器时禁用昨天之前的日期

】在laravel4中使用引导日期选择器时禁用昨天之前的日期【英文标题】：disabledatesbeforeyesterdaywhenusingbootstrapdatepickerinlaravel4【发布时间】：2016-03-0717:20:44【问题描述】：我目前有一个接受日期的输入类型。在前端，我希望用户不... 查看详情

Twitter 引导选项卡和 javascript 事件

】Twitter引导选项卡和javascript事件【英文标题】：Twitterbootstraptabsandjavascriptevents【发布时间】：2011-12-2912:43:38【问题描述】：我正在为一个项目使用twitter引导程序-特别是它的选项卡功能(http://twitter.github.com/bootstrap/javascript.html#tab... 查看详情

更改选项卡后从链接禁用引导打开选项卡

】更改选项卡后从链接禁用引导打开选项卡【英文标题】：Disablingbootstrapopentabfromlinkaftertabchanging【发布时间】：2018-08-1122:30:41【问题描述】：我一直在努力禁止父类li打开带有链接的选项卡，我只想要保存和继续按钮来打开选项... 查看详情

引导日期选择器禁用没有当前日期的过去日期

...期。我正在尝试通过引导datepicker库“bootstrap-datepicker”并使用以下代码：$(\'#date\').datepicker(start 查看详情

引导日期选择器、beforeShowDay 和禁用日期数组

...【发布时间】：2014-04-2905:57:34【问题描述】：我正在尝试使用bootstrapdatepicker插件(https://github.com/eternicode/bootstrap-datepicker/blob/release/doc 查看详情

在引导日期选择器中禁用过去的日期

...apdatepicker【发布时间】：2017-05-1223:47:39【问题描述】：我使用的日期输入表单源自：Youderian,C.HowtoAddaDatePickertoaBootstrapForm。FormDen。[博客]。2015-10-27.但我无法禁用过去的日期。我尝试了以下方法；根据GitHub中的anissue，但它对 查看详情

如何使用“下一步”按钮选择引导选项卡。我遵循了其他答案，但没有工作

】如何使用“下一步”按钮选择引导选项卡。我遵循了其他答案，但没有工作【英文标题】：Howtoselectbootstraptabsusing"next"button.Ihavefollowedotheranswersbutnotworking【发布时间】：2016-08-0406:20:10【问题描述】：我在asp.net页面中有... 查看详情

使用 Vue 当用户单击引导选择器选项时如何调用函数

】使用Vue当用户单击引导选择器选项时如何调用函数【英文标题】：UsingVuehowdoyoucallafunctionwhenauserclicksonabootstrap-selectpickeroption【发布时间】：2020-03-1606:53:24【问题描述】：当用户点击一个选项时，我在一个vue组件中有多个选择器... 查看详情

如何使用javascript更改活动的引导程序选项卡

我已尝试更改活动标签，但未能正确使用javascriptonclick元素。这是代码：<ulclass="navnav-tabs"style="text-align:left;"><liclass="active"><ahref="#first"data-toggle="tab">First</a></li><li><a 查看详情