select 多选禁用其中某个option

最新推荐文章于 2025-06-19 03:39:14 发布

小蒜瓣

最新推荐文章于 2025-06-19 03:39:14 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏：编码文章标签： select option disabled

本文链接：https://blog.youkuaiyun.com/messicr7/article/details/72654168

编码专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何使用JavaScript和jQuery在用户选择特定项时禁用HTML中select元素的某些选项。通过添加disabled属性来实现对选项的禁用，并且展示了在使用bootstrap-select的情况下如何刷新select组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select 多选禁用其中某个option(添加disabled)
<html>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="col-sm-4" id="task_stateTip">
<select class="form-control input-sm selectpicker" name="cus_product" id="cus_product" multiple title="请选择(可多选)" οnchange="Change()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<script type="text/JavaScript">
function Change(){
//获取被选中的option标签
var vs = $('#cus_product option:selected').val();
alert(vs);
if (vs=="volvo"){
$("#cus_product option[value='audi']").attr("disabled",true); }
}
</script>
</body>
</html>

如果引用了 bootstrap-select

$('.ex-disable').click(function () {
  $('.disable-example option').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小蒜瓣

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html option禁用选择 select禁用选项示例

12-14

复制代码代码如下: <select> <option value=””>1</option> <option value=””>2</option> <option value=””>3</option> <option value=””>4</option> <option value=””>5</option> </select> 我不想让用户可以选择 345 怎么办呢复制代码代码如下: <select> <option value=””>1</option> <option value=””>2</option> <optgroup label=”3″></optgroup>

怎样把select中的option禁止了－也就是怎么禁止选择下拉框中的某个选项

chenqunan3231的博客

03-09

262

怎样把select中的option禁止了－也就是怎么禁止选择下拉框中的某个选项原来在优快云上回的一个帖子，觉得不错，当时还很得意思，现在整理一下。发出来。优快云原帖子 <html> <head> <style type="text/css"&gt...

1 条评论您还未登录，请先登录后发表或查看评论

HTML select标签下拉列表选择

最新发布

小白菜的博客

06-19

656

本文将覆盖select标签的全场景应用：从最基础的单选下拉列表，到支持多选的「多选框」；从静态选项到动态生成选项；从原生样式到自定义美化。无论你是刚学HTML的新手，还是需要优化表单交互的前端开发者，都能找到实用的知识。本文将按照「概念→原理→实战→扩展」的逻辑展开：先通过生活化案例理解select是什么，再拆解核心标签和属性，接着用代码实战演示各种场景，最后讲解高级技巧和未来趋势。select标签：HTML中用于创建下拉列表的容器标签（<select>option标签：下拉列表中的具体选项（

select下拉选项禁用

qq_39025670的博客

08-29

5031

如果我们要实现如下效果，让下拉选项提示项“请选择”不可选实现代码为： <select> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C<...

select 选项 option 不可选 ,灰色,禁用

09-02

5975

<select> <option>正常</option> <option disabled="disabled">不可选</option> <option>正常</option> </select>

前端css select、option禁用

qq_45094682的博客

03-10

2071

前端禁用select、option，看图说话 1.直接使用disabled在option 上禁用就可以了 <div class="rig_ipt200 "> <div class=" g-select " style="border-radius: 5px;width: 200px;border: none;"> <input type="text" value="待联系" disabled class="ipt select_img"> <select

Bootstrap select多选下拉框实现代码

11-30

Bootstrap Select 还提供了许多其他功能和选项，如禁用选项、分组、事件监听等。例如，你可以使用 `data-content` 或 `data-subtext` 在选项中添加额外的显示信息。官方 API 文档虽然没有中文版，但通过英文文档和...

el-select 下拉框多选实现全选的实现

10-16

文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。第一种方法是直接在下拉列表中添加一个“全选”选项。该选项是el-option组件，具有特殊的label值“全选”。当用户点击这个...

el-select 多选实现禁用

02-21

### element UI el-select 组件实现多选选项禁用为了实现在 `el-select` 多选模式下部分选项不可选择的效果，可以利用 `disabled` 属性来控制特定项的状态。具体来说，在 `el-option` 标签内设置该属性为布尔值，...

layui的select下拉框插件，可以多选

06-24

此外，layui的`select`插件还支持分组、搜索、禁用等功能，可以根据实际需求灵活运用。在压缩包`dist`文件夹中，通常包含了layui的CSS和JS文件，以及可能的示例代码和文档，你可以参考这些资源来深入了解和使用layui...

select多选 multiple的使用示例

12-11

本文将深入探讨 `select` 多选功能及其相关JavaScript操作。首先，`<select>` 元素的 `multiple` 属性是一个布尔属性，当设置为 `multiple` 或者没有值时，它会使下拉列表变为多选模式。例如： ```html <select ...

ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项

Erya Programming learning

04-08

2884

antd官方文档中Checkbox Group给出的api如下：据图可知，其中Group 的 api 只有一个disabled，它的作用是使整个group选项全部失效，达不到我们的效果，但是Checkbox中却有api disabled 可以使选项单独失效。所以，可以 Checkbox 和 Checkbox Group 结合使用，实现方式如下：具体需求举例：当select==='yinpin'时，只存在yinpin时，前两个禁用当select不包括yinpin时，后两个禁用实现 tip：

select chosen 禁用下拉框某一个option

07-27

183

$("#tbParBudCode option[value='" + budCodeId + "']").attr("disabled", "disabled"); $("#tbParBudCode").chosen(...

js select disabled

sdzlwind的博客

06-29

686

js: select 没有readonly属性，只有disabled属性。但是disabled不会把值传到后台 select 的readonly效果 HTML中Select不用Disabled实现ReadOnly的另类实现. 1

禁止select下拉框的其中某个选择项不能被选择

热门推荐

wmsjlihuan的专栏

08-15

1万+

— 请选择 —? 学期教育 1年级 2年级 3年级 4年级 5年级 6年级 7年级 8年级 9年级 10年级 11年级 12年级

js使select标签option为不可选

tianye_uu的专栏

11-26

3479

实现select标签的部分option为不可选有两种方法:1. 使用optgroup标签及其label属性.兼容于IE,FF.例子如下: <style type="text/css" media="all"> option.readOnly {background:#ccc;color:#666;} </style> <select onchange="if(th...

ant design vue 表格里select下拉框选过的项设置禁用（不能重复）

q249859693的博客

08-30

5535

ant design vue 表格里select下拉框选过的项设置禁用（不能重复）

html option禁用 select禁用选项

小c

04-11

3038

select 下面有很多option 比如

el-select多选禁止

01-09

### Element UI `el-select` 组件中实现多选禁用的方法对于希望在Element UI的`el-select`组件中实现多选选项禁用的情况，可以通过设置特定项为不可选择以及移除已选标签中的关闭图标来达成目的。当涉及到具体的操作时，可以利用`disabled`属性直接作用于单个选项之上，以此达到阻止某些项目被选取的效果[^2]。此方式允许开发者基于业务逻辑动态决定哪些条目应该处于可用或禁用状态。为了防止用户从界面上删除已经选定的内容，可采用CSS样式隐藏默认显示用于清除单项选择标记的小叉号。这通常涉及向对应的DOM节点添加自定义类名（例如`.none`），并通过覆盖原有样式的手段将其视觉呈现调整为不展示的状态[^3]： ```css .none { display: none !important; } ``` 此外，如果需要进一步控制整个`el-select`控件的行为，比如完全锁定其交互能力，则可以在父级元素层面应用全局性的`disabled`特性，从而一次性使能/禁用所有内部子部件的功能。下面是一个简单的例子展示了如何组合运用上述技术点，在Vue模板内配置一个带有部分受限项目的多选列表，并配合外部样式表确保界面行为的一致性和预期效果： ```html <template> <div id="app">  <el-select v-model="selectedOptions" multiple placeholder="请选择">  <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled">  </el-option> </el-select> </div> </template> <script> export default { data() { return { selectedOptions: [], // 已经选择的值集合 options: [ { value: 'op1', label: 'Option 1' }, { value: 'op2', label: 'Option 2', disabled: true }, // 此处设定某一项为禁用 { value: 'op3', label: 'Option 3' } ] }; } }; </script> <style scoped> /* 添加额外的选择器以处理特殊情况下close按钮 */ .el-tag__close{ visibility:hidden!important;/* 或者使用其他方法如display:none*/ } /* 如果有更多定制需求也可以在此基础上继续扩展 */ </style> ```