在项目中难免会遇到一些表单的提交，尤其是多选框中，当用户选择了某一项时，禁止其他项的选择。所以为了避免这样的冲突，所以我们前端就得控制一下了，下面就来个简单demo，记录一下，有需要的伙伴可以拿去耍耍~~

1、先放一张极丑的demo效果图：

2、html代码：

<body>

        <div class="mybox">

            <p>1、请选择你喜欢吃的甜品：</p>

            <input type="checkbox" class="mycheckbox" name="mycheck" value="雪糕"/>雪糕

            <input type="checkbox" class="mycheckbox" name="mycheck" value="蛋糕"/>蛋糕

            <input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无

        </div>

        <div class="mybox">

            <p>1、请选择你喜欢的运动：</p>

            <input type="checkbox" class="mycheckbox" name="mycheck" value="滑雪"/>滑雪

            <input type="checkbox" class="mycheckbox" name="mycheck" value="爬山"/>爬山

            <input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无

        </div>

        <div class="mybox">

            <p>1、请选择你喜欢吃的美食：</p>

            <input type="checkbox" class="mycheckbox" name="mycheck" value="烧烤"/>烧烤

            <input type="checkbox" class="mycheckbox" name="mycheck" value="海鲜"/>海鲜

            <input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无

        </div>

        <div><button id="commit">提交</button></div>

    </body>

3、script 代码：

<script type="text/javascript">      

        for(var i = 0 ; i < $(".mybox").length; i++){

            for(var j = 0 ; j < $(".mybox")[i].childNodes.length; j++){

                $(".mybox")[i].childNodes[j].onclick = function(){

                    if($(this)[0].nextSibling.nodeType == 3 && $.trim($(this)[0].nextSibling.textContent) == "无"){

                        if(this.checked){

                            $(this).siblings().prop("disabled",true)

                            $(this).siblings().prop("checked",false)

                        }

                        else{

                            $(this).siblings().prop("disabled",false)

                        }

                    }

                }

            }

        }

        $("#commit").click(function(){

            $("input[name='mycheck']:checked").each(function(){

                $("body").append(this.value+"、")

            })

        })

    </script>

JQuery checkbox多选框组选中提交，当选择某（无）一项，其他项禁止选中的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  3. 方便实用的jQuery checkbox复选框全选功能

    // 主复选框 <input type="checkbox" id="ck" name="ckAll">// 子复选框项 < ...

  4. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  5. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  6. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  7. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  8. Web版需求征集系统所得1，servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...

  9. Jquery模拟多选框(checkbox)

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

随机推荐

  1. 使用Echarts实现折线图的一点总结

    使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...

  2. echats--visualmap

    visualmap 既图片左下角的筛选按钮 1.对颜色的区分 visualMap: [ { top: 20, left: 0, right: null, // 设置文本为红色 textStyle: { ...

  3. centos7 walle2瓦力部署教程

    项目部署上线,如果是单服务器,那么有多种方式可以部署,比如直接ftp上传,或者直接git去拉取,人工操作也不会花费精力和时间,但是如果采用了集群模式,有多台服务器,那么依靠一台一台的去上传代码,就显得 ...

  4. Leetcode 面试题 01.01. 判定字符是否唯一

    实现一个算法,确定一个字符串 s 的所有字符是否全都不同. 示例 1: 输入: s = "leetcode"输出: false 示例 2: 输入: s = "abc&qu ...

  5. 140. 单词拆分 II

    Q: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中.返回所有这些可能的句子. 说明: 分隔时可以重复使用字典 ...

  6. 0121 spring-boot-redis的使用

    redis是什么呢?redis,属于NoSQL的一种,在互联网时代,起到加速系统的作用. redis是一种内存数据库,支持7种数据类型的存储,性能1S 10w次读写: redis提供的简单的事务保证了 ...

  7. Elasticsearch系列---倒排索引原理与分词器

    概要 本篇主要讲解倒排索引的基本原理以及ES常用的几种分词器介绍. 倒排索引的建立过程 倒排索引是搜索引擎中常见的索引方法,用来存储在全文搜索下某个单词在一个文档中存储位置的映射.通过倒排索引,我们输 ...

  8. Python_递归函数

    楔子 在讲今天的内容之前,我们先来讲一个故事,讲的什么呢?从前有座山,山里有座庙,庙里有个老和尚讲故事,讲的什么呢?从前有座山,山里有座庙,庙里有个老和尚讲故事,讲的什么呢?从前有座山,山里有座庙,庙 ...

  9. java多线程--死锁

    1. Java中导致死锁的原因 Java中死锁最简单的情况是,一个线程T1持有锁L1并且申请获得锁L2,而另一个线程T2持有锁L2并且申请获得锁L1,因为默认的锁申请操作都是阻塞的,所以线程T1和T2 ...

  10. 题解【洛谷P5248】 [LnOI2019SP]快速多项式变换(FPT)

    题目描述 这是一道构造题. 诗乃在心中想了一个n+1项的多项式f(x).第i项的次数为i,系数为ai: f(x)=a0​+a1​*x+a2​*x2+a3​*x3+⋯+an*​xn 给定m以及f(m)的 ...