layui radio单选限制下一个radio单选的实例
作者：Heerey525 时间：2024-06-09 15:52:07
本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>
<!-- ----------------------->
来源：https://blog.csdn.net/hl_qianduan/article/details/81220220
标签：layui,radio,单选
0
投稿猜你喜欢
Asp 返回引用类型函数代码
2011-03-10 10:44:00
mysql5.7 设置远程访问的实现
2024-01-20 12:40:57
flask+layui+echarts实现前端动态图展示数据效果
2023-06-24 15:41:55
PHP的SQL注入过程分析
2023-11-18 02:53:27
js检测浏览器语种，适合于多语言版本的站点
2007-09-12 19:16:00
cv2.imread 和 cv2.imdecode 用法及区别
2023-12-03 06:15:49
SQL SERVER数据操作类代码
2012-07-11 16:16:12
windows server 2003+IIS6 出现 'ASP 不正常，因为执行请求
2010-05-07 11:02:00
总结Python图形用户界面和游戏开发知识点
2022-03-03 18:36:25
tensorflow学习笔记之tfrecord文件的生成与读取
2021-05-24 13:12:43
基于Python实现口罩佩戴检测功能
2022-08-10 20:18:07
PHP基于cookie与session统计网站访问量并输出显示的方法
2023-11-15 08:38:52
python 接口_从协议到抽象基类详解
2021-06-18 02:22:06
Golang 实现Socket服务端和客户端使用TCP协议通讯
2023-07-21 10:09:38
有效地使用 SQL事件探查器的提示和技巧
2009-01-15 13:39:00
pygame学习笔记（5）：游戏精灵
2021-10-13 18:29:56
CSS设计之如何让数字字母自动换行
2007-10-19 15:12:00
关于python变量的引用以及在底层存储原理
2021-06-24 07:37:35
python分割一个文本为多个文本的方法
2022-09-01 06:40:33
mysql千万级数据量根据索引优化查询速度的实现
2024-01-21 19:16:31