html里select怎么设置和取消disabled

最新推荐文章于 2024-05-31 15:31:00 发布
最新推荐文章于 2024-05-31 15:31:00 发布
阅读量1.1w 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShangQuan2012/article/details/52524349
版权 
     很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。只要元素里面设置了disabled=“xxx”不管"xxx"是什么都为禁用。
      //两种方法设置disabled属性 
	$('#areaSelect').attr("disabled",true); 
	$('#areaSelect').attr("disabled","disabled"); 

	//三种方法移除disabled属性 
	$('#areaSelect').attr("disabled",false); 
	$('#areaSelect').removeAttr("disabled"); 
	$('#areaSelect').attr("disabled",""); 
<html>
<head>
<script type="text/javascript">
function disable()
  {
  document.getElementById("mySelect").disabled=true
  }
function enable()
  {
  document.getElementById("mySelect").disabled=false
  }
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<br /><br />
<input type="button" οnclick="disable()" value="Disable list">
<input type="button" οnclick="enable()" value="Enable list">
</form>

</body>
</html>

ShangQuan2012
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML中Select不用Disabled实现ReadOnly的效果
09-06
而题目中提到的需求是“HTML中Select不用`Disabled`实现`ReadOnly`的效果”，即保持下拉列表可查看，但阻止用户交互。 要实现这种效果，我们可以利用事件处理程序来模拟只读状态，而不直接使用`disabled`属性。以下...
html select 禁止修改,input和select设置为不可修改及取消不可修改
weixin_39854867的博客
06-03 5056
input和select设置为不可修改及取消不可修改。1、当需设置input和select显示为只读(不可修改)时，两者有不同的设置方法。1)input可设置为只读，在其中增加属性readonly=“readonly”;2)select没有readonly这个属性，不过可以通过disabled=“disabled”进行设置;3)其中input设置为只读时，仍可提交，而select设置为不可用时，则...
html下拉框只读,html中select readonly/disabled问题的解决方案
weixin_39711441的博客
06-04 3243
在html中，对select标签添加readonly属性后，依旧能够下拉选择，证明readonly属性对html中的select标签并不起作用。经查W3C文档，select标签只对disabled属性起作用，但是添加disabled后，form提交的时候，会忽略掉所有带disabled的标签的值，对提交造成麻烦。所以针对上述问题，总结出以下两种解决方案来达到select标签实现readonly属性...
JS select下拉框设置disabled属性， form表单提交到后端获取不到值了
最新发布
weixin_42917261的博客
05-31 127
提交的时候放开，就可以在后端获取到值了。
html 控件enabled,c#设置页面控件Enabled
weixin_29450147的博客
06-05 424
/// /// 设置当前页面上的所有可输入和选择的控件为只读属性/// /// public static void SetControlReadOnly(Page page){foreach (Control ctrl in page.Controls){SetControlReadOnly(ctrl);}}//递归调用。设置控件只读。public static void SetControlR...
disabled el-select禁用样式 修改 去掉禁用样式 disabled 变为 readonly
weixin_50885665的博客
02-27 1690
【代码】disabled el-select禁用样式 修改 去掉禁用样式。
如何使html中disabled禁用消除
热门推荐
funcky_CX的博客
11-04 1万+
html标签input中有disabled,这个属性会使当前要输入或选择的东西不可用，但是我们在设计用户注册表时，当我们同意注册后希望disabled不在是禁用的状态,那就要使disabled=false，解决这个问题还要用到Javascript。 ``&lt;input name="confirm" type="checkbox" onclick="agree();" id="cb" size=...
html移除disabled属性,JQuery设置和去除disabled属性
weixin_39599097的博客
06-04 2025
在HTML的标签中，我们常用disabled属性来暂时禁用一些输入框可以通过JQuery来设置和去除disabled属性，起到启用禁用和解除禁用的作用JQuery代码://两种方法设置disabled属性$('#area').attr("disabled",true);$('#area').attr("disabled","disabled");//三种方法移除disabled属性$('#area...
Layui 动态禁止select下拉的例子
10-16
$('select').attr('disabled', 'disabled'); // 禁用所有select元素 form.render('select'); // 重新渲染select，确保禁用状态生效 } } ``` 当用户尝试改变`select`的值时，我们调用`disSelect`函数。在这个例子...
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip
03-09
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
bootstrap-select-1.13.0-dev.zip
08-15
Bootstrap Select是基于流行的Bootstrap框架开发的一个插件，用于增强HTML的`<select>`元素，提供更美观、功能丰富的下拉选择框。这个插件在Web应用中尤其常见，因为它能够帮助开发者快速创建交互性强且具有良好视觉...
联动select.rar
06-30
// 取消第二个select的disabled属性，使其可用 select2.disabled = false; }); }); ``` 4. **优化用户体验**：在实际应用中，我们还可以添加一些用户体验优化，如初始加载时就填充部分数据，或者在等待数据返回...
readonly 与 disabled的区别
qq_33358062的博客
09-13 488
1，readonly 控件只读，可以传值到后台，input输入框可聚焦 2,disabled 控件被禁用，只读，不会将此值传到后台，input输入框不聚焦 3，关于设置与移除disabled属性 //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $(
怎么解除disabled激活灰色按钮
百度一下 猎人社区
07-10 2451
首先，要解除禁用状态的按钮，我们需要检查相关代码。通常，按钮的禁用状态是通过在HTML、CSS或JavaScript代码中设置"disabled"属性来实现的。通过这些方法，禁用状态的按钮将重新焕发活力，为用户提供更好的操作体验。在Web界面开发中，我们经常会遇到禁用状态的按钮，它们通常以灰色显示，提示用户当前不能执行特定操作。我们可以通过修改按钮的样式，将其设置为激活状态的样式，从而改变按钮的外观。这段代码会覆盖默认的禁用状态样式，将按钮的文字颜色设置为黑色，背景颜色设置为白色。
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...
html下拉框不显示空值,解决select下拉框禁用（设置disabled属性）,后台获取值为空...
weixin_36352523的博客
06-07 1930
如果下拉框设置disabled属性后，提交表单到后台，后台获取的下拉框的值为空，以下有三种解决获取不到下拉框选项值的方法。有下拉框html如：三种方法：1.为下拉框添加样式，可以禁用该下拉框：2.为下拉框添加onfocus和onchange方法，可以禁用该下拉框：3.在页面加载之前设置$(function() {$('#select').attr("disabled",true); })；提交...
如何设置select，input只读不可编辑且值可传递
君子不卿
11-28 1050
属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。. readonly 属性可以防止用户对值进行修改。
js disabled属性添加删除
xiansibao的博客
04-04 3746
/两种方法设置disabled属性 $('#areaSelect').attr("disabled",true);//三种方法移除disabled属性 $('#areaSelect').attr("disabled",false);
el-select选中某个选项后，禁用该选项，其他el-select不能选中该选项，取消选中该选项后，解除该选项的禁用
05-05
可以通过监听 `change` 事件来实现这个功能。具体实现步骤如下： 1. 给每个 `el-select` 绑定 `change` 事件。 2. 在事件处理函数中，获取当前选中的选项。 3. 遍历所有 `el-select`，将当前选中的选项禁用，并设置其他 `el-select` 中相同选项为禁用状态。 4. 如果取消选中当前选项，则将其解除禁用状态。 下面是一个示例代码，你可以参考一下： ```html <template> <div> <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option> </el-select> <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option> </el-select> </div> </template> <script> export default { data() { return { selected: '', options: [ { label: '选项1', value: '1', disabled: false }, { label: '选项2', value: '2', disabled: false }, { label: '选项3', value: '3', disabled: false }, ], }; }, methods: { handleChange() { // 获取当前选中的选项 const selectedOption = this.options.find(item => item.value === this.selected); // 遍历所有 el-select，禁用当前选中的选项，并设置其他相同选项为禁用状态 this.$nextTick(() => { const selects = document.querySelectorAll('.el-select'); selects.forEach(select => { const options = select.querySelectorAll('li'); options.forEach(option => { if (option.getAttribute('data-value') === selectedOption.value) { option.classList.add('is-disabled'); } if (option.classList.contains('selected')) { const value = option.getAttribute('data-value'); const sameOption = this.options.find(item => item.value === value); if (sameOption && sameOption.value !== selectedOption.value) { option.classList.add('is-disabled'); sameOption.disabled = true; } } }); }); }); }, }, }; </script> ``` 上面的代码中，我们给每个 `el-select` 绑定了 `change` 事件，并在事件处理函数中实现了禁用选项和解除禁用选项的逻辑。当选项状态改变时，我们通过遍历所有 `el-select`，找到需要禁用的选项，并设置为禁用状态。如果取消选中当前选项，则将其解除禁用状态。注意，由于 `el-select` 是异步渲染的，所以我们需要在 `$nextTick` 中处理选项状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值