解决select2 disabled无效

最新推荐文章于 2022-08-25 14:25:29 发布

原创最新推荐文章于 2022-08-25 14:25:29 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select2-js

JQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在使用Select2插件的情况下正确禁用输入框的方法。通常情况下，直接使用$(#myinput).attr(disabled true)无法达到预期效果。正确的做法是通过Select2 API来操作，即使用$(#myinput).select2(enabled false)。

粒子

<input id="myinput" />

//正常情况禁用input 

$("#myinput").attr("disabled","disabled")

//或者

$("#myinput").attr("disabled",true)

//但是这样没有达到禁用的效果，

//解决方案

$("#myinput").select2("enabled",false)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bloxed

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决elementUI select 的disabled属性设置无效问题一例

10-27

6774

解决elementUI select 的disabled属性设置无效问题一例

HTML中Select不用Disabled实现ReadOnly的效果

09-06

通常，我们会使用`disabled`属性来禁用一个`<select>`元素，但这会使得整个下拉列表呈灰色不可选状态。而题目中提到的需求是“HTML中Select不用`Disabled`实现`ReadOnly`的效果”，即保持下拉列表可查看，但阻止用户...

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

解决select2动态设置disabled属性在ie10中不生效的问题。

a1085578081的博客

11-24

887

$('#select2').prop("disabled", true); 后面记得加上 $('#select2').select2();即可

解决select2 在modal中搜索框无效的问题

adai19850204的博客

12-11

546

$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 转载于:https://www.cnblogs.com/Byme/p/10100556.html

select2插件的disabled功能详解

热门推荐

IT前端小菜

10-20

2万+

最近做项目用到了select2插件，需求中需要给下拉框设置默认值之后，禁用下拉框，我开始的写法是这样的：<select class="js-example"></select> <script type="text/javascript"> $(function(){ $(".js-example").select2(); $(".js-example").v

嵌入在引导模式中时，Select2不起作用

w36680130的博客

06-27

713

When I use a select2 (input) in bootstrap modal, I can't type anything into it. 当我在bootstrap模式中使用se

设置disabled属性后台读不到数据如何让select支持readonly

09-28

2. **使用jQuery控制`disabled`属性**：另一种方法是通过jQuery动态地控制`disabled`属性。在页面加载时，你可以设置`disabled`为`true`，使表单元素不可用。当用户提交表单时，你可以临时将`disabled`设置为`...

bootstrapValidator bootstrap-select验证不可用的解决办法

08-31

2. **配置Bootstrap-select组件**：在HTML（通常在JSP页面）中，我们需要为Bootstrap-select组件添加一个隐藏的input字段，以便存储选定的值。这样，BootstrapValidator就能针对这个input进行验证： ```html ...

select2 省市区级联下拉菜单

10-10

搜索下拉框（select2插件）学习与使用：为什么select2搜索无效

06-01

2413

需求：可搜索的下拉框。layui就有一个搜索下拉框，只要在 select 标签上添加 lay-search 就可以使用了，但是在搜索的时候不知道是卡住了还是怎么回事，有时候需要等一会，有时候需要按一下shirf键，真的是太难用了，也不好看。索性使用select2插件： HTML： <td>类型：</td> <td> <select name="type" id="type" lay-ignore class="layui-input layui-u

select2 option 设置disabled以及如何取消disabled属性

shu580231的博客

05-16

1万+

select2使用不久，最近遇到一个问题，需要对某一个option设置为不可选，但是一些操作之后恢复可选状态。1.设置为不可选状态，很容易， $("#single_select option[value='b']").prop('disabled',true); $("#single_select").select2();2.取消option的disabled属性。2.1 $("#single_s...

设置select菜单禁止选择或选择无效

Alone_in_的博客

12-04

8525

一、disabled属性在select上设置disabled="disabled"，即可将下拉菜单变为只读状态，不可选择，点击也无效。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//...

IE中Option的disabled无效 Select只读模式

welody的博客

10-08

416

给IE下的option项添加disabled的禁用功能 [code="java"] window.onload = function() { if (document.getElementsByTagName){ var s = document.getElementsByTagName("select"); if (s.length > 0){ ...

layui中select disable不起作用，checkbox样式无法显示

qq_41617901的博客

08-21

1637

1.当在使用jquery操作DOM对象，让select标签disable，这是没有禁用效果； 2.当你拼接html字符串，最后append当Dom中的，这时对应input type=checkbox的layui样式没有显示；当进行以上操作时：记得写上如下代码： form.render(); 记得在Layui中render是十分重要的。 ...

如果选用了select2框架，默认选中用selected无效

qq_34851184的博客

09-26

2476

解决办法1：$('#seclectID').select2().select2('val', $('#seclectID option:eq(0)').val()); 解决办法2：var ddd = $("#colType").select2();//获取selectid ddd.val(data.dataType).trigger("change"); ht

select框想要不可点选，但使用disabled后，无法获取到值的解决办法（使用pointer-events：none解决）

Alan的博客

04-16

5585

要求：select框想要不可点选，但使用disabled后，无法获取到值的解决办法（使用pointer-event：none解决）需求是：点击编辑按钮后，select下拉选不可操作，点击保存按钮后，可操作尝试一、使用了disabled属性后，当true时，其他的js函数使用serialize()或serializeArr()无法取到该元素的值解决办法： $("#id").css('...

IE6 7 select option设置disabled无效

weixin_34160277的博客

03-31

243

系统单据的一个分类需要禁用（不是删除）,做单据的表单是用的下拉列表，马上就想到了把那个option disabled. 1: function diableSelectItem(id,v){ 2: var el = document.getElementById(id); 3: for(var i=0,j = el.optio...

标签属性disabled selected checked等布尔类型赋值不生效？

秋来九月八

06-26

1875

探究原生html vue react中标签布尔属性传值的不同表现

select2禁用选择框的方法

yearn105的博客

08-25

1356

select2禁用选择框的方法，select2禁用无效可以尝试一下。

el-select设置disable无效

最新发布

06-27

<think>我们正在解决el-select的disable属性不生效的问题。根据用户提供的引用，我们可以分析出两个关键点：1.引用[1]中提到，当disabled属性变更时，通过watch监听并调用this.resetInputHeight()方法（在nextTick中）来调整高度。这暗示disabled属性变更可能影响组件渲染，需要手动处理某些更新。2.引用[2]中展示了el-option的使用，其中在el-option上使用了:disable-remote="false"（注意：这里可能是用户笔误，因为官方文档中el-option的禁用属性是disabled，而不是disable-remote）。同时，在el-option中通过鼠标事件来动态设置样式。结合用户问题：el-select的disable属性不生效。这里需要明确：-用户可能是指el-select整体禁用，还是el-option的禁用？-根据用户最后一句“我想解决el-select组件设置disable属性无效的问题”，应该是指整个el-select组件的禁用。在ElementUI中，el-select组件的禁用是通过设置disabled属性来实现的。如果设置后不生效，可能的原因和解决方法如下：1.**绑定方式错误**：如果使用动态绑定，应该使用v-bind（即:disabled），例如：`:disabled="isDisabled"`，其中isDisabled是data中的变量。如果直接使用disabled，则会被当作静态字符串（除非值是布尔值，但字符串"false"会被当作真值）。正确示例：`:disabled="true"`或`disabled="true"`（注意：字符串的"true"会被解析为true，但字符串的"false"也会被解析为true，因为非空字符串为真。所以建议使用动态绑定布尔值）。2.**动态改变disabled后未触发渲染更新**：如引用[1]所示，有时改变disabled状态后，组件的高度可能需要重新计算。因此，可以尝试在改变disabled状态后，使用nextTick来触发更新。例如：```javascriptwatch:{isDisabled(newVal){//假设isDisabled是控制disabled的变量this.$nextTick(()=>{//调用el-select的方法来重置高度？实际上，el-select内部应该处理，但如果有问题，可以尝试强制更新//或者，如果引用[1]中的resetInputHeight是自定义方法，那么可能是需要这个//但是，官方文档没有提到需要手动重置高度，所以这个可能是特定情况下的hackthis.$refs.selectRef.blur();//或者尝试让select失去焦点，有时可以解决样式问题});}}```3.**样式冲突**：如果disabled生效了（即无法点击），但是样式没有变化（看起来还是可用的），则可能是自定义样式覆盖了禁用状态样式。需要检查自定义CSS，确保没有覆盖禁用状态样式。可以通过浏览器开发者工具检查应用禁用状态后的样式。4.**版本问题**：某些ElementUI版本可能存在bug，建议升级到最新版本。5.**使用方式**：确保el-select的disabled属性使用正确。例如：```html<el-selectv-model="value":disabled="true"><el-optionlabel="选项1"value="1"></el-option></el-select>```6.**如果禁用的是el-option**：则需要在el-option上设置disabled属性，同样使用动态绑定。例如：```html<el-option:disabled="option.disabled"...>```根据用户的问题，可能是整个el-select的禁用。因此，我们重点检查整个select的禁用。**解决方案步骤**：1.确认绑定方式：确保使用`:disabled`绑定布尔值变量。2.检查变量值：确保控制禁用的变量是布尔值（true/false），而不是字符串或其他。3.如果动态改变，尝试在改变后调用`this.$nextTick`并执行`this.$refs.selectRef.blur()`（假设给el-select设置了ref="selectRef"），或者尝试调用el-select的update方法（如果有）。4.检查样式：如果禁用后样式没变，添加自定义样式来覆盖，例如：```css.el-select.is-disabled.el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed;}```5.如果上述方法无效，考虑升级ElementUI版本。另外，根据引用[2]中，他们使用了@visible-change事件，但这对禁用问题没有直接帮助。**示例代码**：```vue<template><el-selectv-model="value":disabled="isDisabled"ref="mySelect"><el-optionlabel="选项1"value="1"></el-option><el-optionlabel="选项2"value="2"></el-option></el-select><button@click="toggleDisabled">切换禁用状态</button></template><script>exportdefault{data(){return{value:'',isDisabled:false};},methods:{toggleDisabled(){this.isDisabled=!this.isDisabled;//如果改变状态后出现样式问题，可以尝试：this.$nextTick(()=>{this.$refs.mySelect.blur();//让select失去焦点});}}};</script>```如果问题仍然存在，可以尝试在nextTick中强制更新组件（使用`this.$forceUpdate()`）或者重新渲染select（比如改变key值强制重新渲染）。**相关问题**：1.如何动态禁用el-select组件？2.el-option的禁用属性不生效怎么办？3.如何修改el-select禁用状态的样式？</think>### el-select 的 disabled 属性不生效的解决方法在 ElementUI 中，`el-select` 组件的 `disabled` 属性不生效通常由以下原因引起，以下是具体解决方法： --- #### 1. **属性绑定错误** **问题**：使用静态属性 `disabled="true"` 而非动态绑定 **解决**：使用 `v-bind` 或 `:` 动态绑定布尔值 ```vue  <el-select :disabled="isSelectDisabled">  </el-select> ``` ```js data() { return { isSelectDisabled: true // 动态控制 } } ``` --- #### 2. **样式冲突导致视觉失效** **问题**：禁用状态生效但视觉样式被覆盖 **解决**：添加强制样式覆盖 ```css .el-select.is-disabled .el-input__inner { background-color: #f5f7fa !important; border-color: #e4e7ed !important; color: #c0c4cc !important; cursor: not-allowed !important; } ``` --- #### 3. **组件渲染延迟问题** **问题**：动态切换 `disabled` 后未触发视图更新 **解决**：在 `$nextTick` 中强制刷新（参考引用[1]） ```js watch: { isSelectDisabled(newVal) { this.$nextTick(() => { this.$refs.mySelect.blur(); // 通过失焦触发更新 // 或调用组件内部方法（如有） }); } } ``` --- #### 4. **作用域错误** **问题**：在嵌套组件中未正确传递 prop **解决**：确保 prop 穿透到子组件 ```vue <child-component> <el-select :disabled="$attrs.disabled" v-bind="$attrs"></el-select> </child-component> ``` --- #### 5. **版本兼容性问题** **问题**：ElementUI 旧版本存在 bug **解决**： - 升级到最新版 ElementUI（≥2.15.0） - 或添加 polyfill： ```js import 'element-ui/lib/umd/element-ui.inc.css'; ``` --- #### 完整示例 ```vue <template> <el-select v-model="value" :disabled="isDisabled" ref="select" @visible-change="handleVisibleChange"  > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"  /> </el-select> </template> <script> export default { data() { return { value: '', isDisabled: true, // 控制整个select options: [ { value: 1, label: '选项1', disabled: false }, { value: 2, label: '选项2', disabled: true } // 禁用单个选项 ] } }, methods: { handleVisibleChange(visible) { if (!visible && this.isDisabled) { this.$refs.select.blur(); // 关闭下拉时强制失焦 } } } } </script> ``` > **关键点总结**： > 1. 始终使用 `:disabled` 动态绑定 > 2. 通过 `$nextTick` 处理渲染延迟问题 > 3. 检查 CSS 覆盖和组件版本 > 4. 区分**整个选择框禁用** vs **单个选项禁用**（`el-option` 的 `disabled` 属性） [^1]: 引用自 ElementUI 动态设置 disabled 的高度修复方案 [^2]: 引用自 el-option 事件处理示例 --- ### 相关问题 1. 如何动态禁用 `el-option` 中的单个选项？ 2. 为什么 `el-select` 禁用状态下仍可展开下拉菜单？如何彻底禁用交互？ 3. `el-select` 的 `disabled` 属性和 `readonly` 属性有何区别？