设置 select 某一项不可选，禁用 select 指定 option

2023-08-27 1887阅读
首页 » 资源 » 技术 » 正文

设置 select 某一项不可选，禁用 select 指定 option

主机百科
2020-07-23 01:33 主机百科
1 抢沙发

在日常开发中经常有需求设置 select 下拉选择框中的某一项或某几项不可选，解决方案就是给对应 option 加上 disabled 属性即可，具体代码如下：

设置 select 某一项不可选，禁用 指定 option 第1张

  <select class="form-control input-inline nput-medium" name="group">   <option value="list_2" disabled>科级以上指标</option>   <option value="item_1" >|--领导具备能力</option>   <option value="item_2" >|--科级处级指标</option>   <option value="item_3" >|--工作结果</option>   <option value="list_1" disabled>员级指标</option>   <option value="item_4" selected>|--员工具备素质</option>   <option value="item_5" >|--履行岗位职责情况</option>   <option value="item_6" >|--工作结果</option>   <option value="list_0" disabled>关联指标</option>   <option value="item_7" >|--日常状态</option>   <option value="item_10" >|--|--工作态度</option>   <option value="item_11" >|--|--形象、卫生</option>   <option value="item_8" >|--团队协作</option>   <option value="item_12" >|--|--部门工作</option>   <option value="item_13" >|--|--服务意识</option>   <option value="item_9" >|--关联工作完成情况</option>   <option value="item_14" >|--|--工作业绩</option>   <option value="item_15" >|--|--工作过程监控</option>   </select>
1
  &nbsp; &lt;select class=&quot;form-control input-inline nput-medium&quot; name=&quot;group&quot;&gt;  &nbsp; &lt;option value=&quot;list_2&quot; disabled&gt;科级以上指标&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_1&quot; &gt;|--领导具备能力&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_2&quot; &gt;|--科级处级指标&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_3&quot; &gt;|--工作结果&lt;/option&gt;  &nbsp; &lt;option value=&quot;list_1&quot; disabled&gt;员级指标&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_4&quot; selected&gt;|--员工具备素质&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_5&quot; &gt;|--履行岗位职责情况&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_6&quot; &gt;|--工作结果&lt;/option&gt;  &nbsp; &lt;option value=&quot;list_0&quot; disabled&gt;关联指标&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_7&quot; &gt;|--日常状态&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_10&quot; &gt;|--|--工作态度&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_11&quot; &gt;|--|--形象、卫生&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_8&quot; &gt;|--团队协作&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_12&quot; &gt;|--|--部门工作&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_13&quot; &gt;|--|--服务意识&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_9&quot; &gt;|--关联工作完成情况&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_14&quot; &gt;|--|--工作业绩&lt;/option&gt;  &nbsp; &lt;option value=&quot;item_15&quot; &gt;|--|--工作过程监控&lt;/option&gt;  &nbsp; &lt;/select&gt;

上述代码运行结果如下（红框部分 option 无法选择）：


相关阅读：

1、福建VPS服务探索与分销商机揭秘，优质VPS服务体验等你来体验

2、美国个人VPS云主机，高效灵活的个人云存储之选！

3、免费VPS虚拟主机全解析，优势、陷阱与明智选择指南

4、动态VPS轻松搭建邮局服务指南，一步到位的解决方案！

5、VPS的利与弊深度解析，全面探讨虚拟专用服务器的优缺点

    高速稳定云服务器25元起
    免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    相关阅读

    目录[+]