在项目中难免会遇到一些表单的提交，尤其是多选框中，当用户选择了某一项时，禁止其他项的选择。所以为了避免这样的冲突，所以我们前端就得控制一下了，下面就来个简单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. Eclipse导入工程Some projects cannot be imported because they already exist in the workspace

    记录一下本次出错原因,以及解决方法 错误原因: 第一次导入后,删除工程,没有没有勾选Delete project contents on disk(cannot be undone) 解决方法: 1 ...

  2. dijkstra算法为什么不能处理带有负边权的图

      1 2 3 1 0 8 9 2 10 0 10 3 10 -2 0 先看样例再解释,看邻接矩阵会发现, 如果用dijkstra算1-2的最短路因为贪心思想所以得到的结果是8,但明显可以看到1-3- ...

  3. hashmap与currentHashMap

    hashmap的缺点 多线程不安全,在并发场景下使用时容易出现死循环,脏读问题等 死循环:https://juejin.im/post/5a66a08d5188253dc3321da0 (这篇好点)h ...

  4. mysql数据库事务的操作与理解

    --------------------事务----------------------------------------------查询mysql事务隔离级别1.查看当前会话隔离级别select ...

  5. 关于jquery改变onclick方法，最保险的做法

    function a(){ alert("a"); } function b(){ alert("b"); } <input type="but ...

  6. 第四十三篇 入门机器学习——Numpy的基本操作——Fancy Indexing

    No.1. 通过索引快速访问向量中的多个元素 No.2. 用索引对应的元素快速生成一个矩阵 No.3. 通过索引从矩阵中快速获取多个元素 No.4. 获取矩阵中感兴趣的行或感兴趣的列,重新组成矩阵 N ...

  7. Scale9Sprite 的 setCapInsets中需要注意的地方

    在设置 setCapInsets()方法的y参数的时候,不直接取cocosStudio中的y,而是取Scale9Sprite.height - cocosStudio中的y.

  8. TCP/IP协议-为什么说TCP是可靠连接

    我们平常经常说UDP是不可靠连接,TCP是可靠连接,然而TCP为什么是可靠的呢 1. TCP和UDP的优缺点TCP 缺点: [1] 三次握手四次挥手,传输更多包,浪费一些带宽[2] 为了进行可靠通信, ...

  9. ansible笔记（2）：管理清单配置详解

    前情提要:管理清单(Iventory)配置文件/etc/ansible/hosts.通过修改该配置文件以达到管理受控主机的目的.    在我的实验平台上有3台主机:192.168.232.181(an ...

  10. docker容器 - 新建容器、启动容器、暂停容器和停止容器

    实验环境 CentOS 7.5 容器 容器是镜像的运行实例.不同的是,镜像是静态的只读文件,而容器带有运行时需要的可写文件层:同时,容器中的应用进程处于运行状态. 新建容器 [root@kvm ~]# ...