zoukankan      html  css  js  c++  java
  • layui radio单选限制下一个radio单选

    本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮,

    选中a,使得q不可选,w选中;选中b,使得w不可选,q选中

    下面是完整的代码,需要引入layui.js,jquery.js,layui.css

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layui</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" href="layui/css/layui.css"  media="all">
      <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <form class="layui-form layui-form-pane" action="">
      
      <div class="layui-form-item" pane="">
        <label class="layui-form-label">单选框一</label>
        <div class="layui-input-block" >
          <input type="radio" name="sex" value="0" title="a" lay-filter='aaa'>
          <input type="radio" name="sex" value="1" title="b" lay-filter='aaa'>
         
        </div>
      </div>
      
      <div class="layui-form-item" pane="">
          <label class="layui-form-label">单选框二</label>
          <div class="layui-input-block">
            <input type="radio" name="aa" value="0" title="q" lay-filter='bbb'>
            <input type="radio" name="aa" value="1" title="w" lay-filter='bbb'>
          </div>
      </div>
      
        <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>   
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src='layui/jquery-3.3.1.js'></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use(['form'], function(){
      var form = layui.form

     form.on('radio(aaa)', function(data){
            // console.log(data.elem); //得到radio原始DOM对象
            // console.log(data.value); //被点击的radio的value值
            if(data.value==0){
                $('input[title=q]').removeAttr('checked').prop('disabled','disabled');
                $('input[title=w]').removeAttr('disabled').prop('checked','checked');
                form.render('radio')
            }else{
                $('input[title=q]').removeAttr('disabled').prop('checked','checked');
                $('input[title=w]').removeAttr('checked').prop('disabled','disabled');
                form.render('radio')

            }
        });
            //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });
      
    });
    from.on('radio')
    </script>
    </body>
    </html>

  • 相关阅读:
    黑盒测试用例设计方法
    摄像头--用例设计
    单元测试框架unittest
    ES集群启动流程
    ES 系统模型
    HBase 体系结构
    HBase 数据模型
    引用中间件导致的OOM问题调查
    BeanDefinition注册逻辑解析
    spring xml 解析bean配置文件为beanDefinition过程
  • 原文地址:https://www.cnblogs.com/hanlei525/p/9613007.html
Copyright © 2011-2022 走看看