本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单选的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容