layui radio单选限制下一个radio单选的实例

2019-11-19 10:55:01

字体：大中小

来源：转载

供稿：网友

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

选中a，使得q不可选，w选中；选中b，使得w不可选，q选中

下面是完整的代码，需要引入layui.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="https://hanlei525.github.io/layui-v2.4.3/layui/css/layui.css" rel="external nofollow"  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="单选框一" value="1" title="a" lay-filter='aaa'>       <input type="radio" name="单选框一" value="2" 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="单选框二" value="1" title="q" lay-filter='bbb'>         <input type="radio" name="单选框二" value="2" 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='https://hanlei525.github.io/layui-v2.4.3/layui/layui.js'></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script> layui.use(['form'], function(){  var form = layui.form,   $=layui.jquery;  form.on('radio(aaa)', function(data){   // console.log(data.elem); //得到radio原始DOM对象   // console.log(data.value); //被点击的radio的value值   if(data.value==1){    $('input[title=q]').removeProp('checked').prop('disabled','disabled');    $('input[title=w]').removeProp('disabled').prop('checked','checked');    form.render('radio')   }else{    $('input[title=q]').removeProp('disabled').prop('checked','checked');    $('input[title=w]').removeProp('checked').prop('disabled','disabled');    form.render('radio')   }  });  //监听提交  form.on('submit(demo1)', function(data){   layer.alert(JSON.stringify(data.field), {    title: '最终的提交信息'   })   return false;  }); });</script></body></html> <!-- ----------------------->

以上这篇layui radio单选限制下一个radio单选的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：微信小程序拼接图片链接无底洞深入探究

下一篇：JavaScript Array对象基本方法详解