在项目中难免会遇到一些表单的提交，尤其是多选框中，当用户选择了某一项时，禁止其他项的选择。所以为了避免这样的冲突，所以我们前端就得控制一下了，下面就来个简单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. CSS的字体样式

    CSS的字体样式 1. span标签(约定俗成:重要的东西用它括起来) 首选介绍一个约定俗成的东西:span标签.一般将想要突出的东西,比较重要的东西,用span标签括起来. 比如,”学习Java“这 ...

  2. eclipse的安装和环境配置

    一,eclipse下载 地址:https://www.eclipse.org/downloads/ 一般浏览器都有翻译功能 二.有32位和64位的版本根据自己的需求下载,选下载的选下载量最多的下载. ...

  3. K3/Cloud点击按钮打开第三方URL

    public override void AfterBarItemClick(BOS.Core.DynamicForm.PlugIn.Args.AfterBarItemClickEventArgs e ...

  4. 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)

    我没有实现时间复杂度为O(n)的算法. 思路:从第一数开始,onelist[0]:onelist[0]+onelist[1]:这样依次推算出每个子数组的sum值.和max进行比较.最后得到max值. ...

  5. C++索引从0开始的堆排序算法实现

    更新2019年11月4日 04:26:35 睡不着觉起来寻思寻思干点啥吧,好像好久没写堆排了.于是写了个索引从0开始的堆排,这次把建堆函数略了并在heapsort主函数里,索引从0开始到size-1结 ...

  6. JQ DOM元素 创建 添加 删除

    创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...

  7. javascript当中Function用法

    4)Function用法 例 3.4.1 <head>    <meta http-equiv="content-type" content="text ...

  8. input输入框在ios手机上获取焦点后有一个灰色阴影

    遇到的场景: 有一个输入框 设置 outline:none 然后我又想给他设置获取焦点的颜色 然后 我给input 设置 border 为 1px t透明的 然后 获取焦点的时候 重新设置border ...

  9. 2.sleep和wait的区别：

    sleep是Thread类的方法,wait是object(Java类库的老祖宗)的方法 sleep阻塞的线程在指定时间后,会转变为可执行状态:wait它要等待notify的唤醒 执行了sleep的线程 ...

  10. 数位DP 不要62

    数位DP的问法是从某个数到某个数的区间里,求出满足题目要求的个数: 如本题所说的不要62和4,就是求出这个区间内,满足这一条件的数: 比如问 6 199的这个区间内满足条件的数,那么就求出1到199满 ...