单选按钮组的操作，点击某个单选按钮操作底下相关组件，使其禁用或者允许

最新推荐文章于 2024-03-24 09:29:11 发布
最新推荐文章于 2024-03-24 09:29:11 发布
阅读量1k 收藏
点赞数 1
分类专栏： JavaScript Articles 文章标签： 单选按钮组操作相关组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wserendipity/article/details/71703272
版权
单选按钮组的操作，点击某个单选按钮操作底下相关组件，使其禁用或者允许
需求：点击选择老师时，老师与课程是切换的，
选择老师，选择杨过时，禁止操作身法技能下拉框、年级号。课程号，允许选择内功心法，
选择课程时，禁止选择两个老师，禁止选择身法技能允许内功心法下拉框，班级号、课程号输入框操作
样式如下图：


代码：

HTML部分：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>单选按钮组的操作</title>
</head>
<body>
<form method="" action="">
    <div style="padding-left: 200px">
            <div class="radio">
                <label>
                    <input name="teake" type="radio"  id="gfsq" value="gf" />
                    <span class="lbl"> 一、选择老师</span>
                </label>
                <p></p>
                <label class="">每个老师对应的课程</label>
                <div class="radio">
                    <label>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input name="teacher" type="radio" class="ace" value="yangguo" id="yg" />
                        <span class="lbl"> 1、杨过</span>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input name="teacher" type="radio" class="ace" value="wdk" id="zwj"/>
                        <span class="lbl"> 2、张无忌</span>
                    </label>
                </div>
            </div>

            <div class="radio">
                <label>
                    <input name="teake" type="radio"  id="xfsq" value="xf" />
                    <span class="lbl">二、选择课程</span>
                </label>

            </div>
        <div style="padding-left: 20px" id="jzcz">
          
                <label>对应的课程</label>
                <div>
                    &nbsp;&nbsp;

                    <label for="form-field-select-1" name="sfjn">身法技能</label>&nbsp;
                    <select class="form-control" id="form-field-select-1" style="width:200px;display: inline-block;" name="sfjn" >
                        <option value="zzszyfp">至高全面身法技能</option>
                        <option value="zzsptfp"></option>
                        <option value="AK"></option>
                    </select>
                    &nbsp;<label for="form-field-select-1" name="zsfs">内功心法</label>&nbsp;
                    <select class="form-control" id="form-field-select-1" style="width:200px;display: inline-block;">
                        <option value="ptzs">乾坤大挪移</option>
                        <option value="zzsptfp">九阴真经</option>
                        <option value="AK">九阳神功</option>
                    </select>
                </div>
                <div style="padding-top: 10px">
                    &nbsp;&nbsp;
                    <label name="banji">年级号</label>&nbsp;
                    <input id="banji" name=""    style="width:200px;height: 20px;" />&nbsp;
                    <label name="kehao">课程号</label>&nbsp;
                    <input id="kehao" style="width:200px;height: 20px;" />
                </div>
            
        </div>
    </div>
    </form>
</body>

</html>

JavaScript部分：

<script type="text/javascript">
    var teake=document.getElementsByName("teake");
    var teacher=document.getElementsByName('teacher');
    var sfjn=document.getElementById('form-field-select-1');
    var banji=document.getElementById('banji');
    var kehao=document.getElementById('kehao');
    var yg=document.getElementById('yg');
    var zwj=document.getElementById('zwj');
    
    for (var i = 0; i < teake.length; i++) {
        
        teake[0].onclick = function(){
           
            yg.disabled=false;
            zwj.disabled=false;
            for(var i=0; i<teacher.length;i++){
                
                teacher[i].οnclick=function(){
                    if(this.value=="yangguo"){
                        sfjn.disabled=true;
                        banji.disabled=true;
                        kehao.disabled=true;
                    
                    }else{
                        banji.disabled=false;
                        kehao.disabled=false;
                        sfjn.disabled=true;
                    }
                }
            }
        }
        
        teake[1].onclick = function(){
            initcheck();//初始化 清空选择
            yg.disabled=true;
            zwj.disabled=true;
            sfjn.disabled=true;
            banji.disabled=false;
            kehao.disabled=false;
        }
    }
   
    for(var k=0;k<teacher.length;k++){
        
        teacher[k].οnclick=function(){
            
            if (this.value=="yangguo"){
                teake[0].checked=true;
                sfjn.disabled=true;
                banji.disabled=true;
                kehao.disabled=true;
            }else{
                teake[0].checked=true;
                banji.disabled=false;
                kehao.disabled=false;
                sfjn.disabled=true;
            }
        }
    }
    //初始化单选按钮状态,清空不可选
    function initcheck(){
        for(var j=0;j<teacher.length;j++){
            teacher[j].checked =false;
        }
    }
</script>

smile丶hm
关注
专栏目录
单选按钮和标签组合点击
牛栏山矿泉水
04-26 160
1、问题背景 现在，有个问题：一组单选按钮，点击按钮可以选中，但是点击标签label不能被选中。 2、实现源码 （1）点击按钮选中 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &l...
如何选择radio或者select的情况下让指定的文本disable
weixin_33958366的博客
05-09 107
选中radio或者是select让指定的文本disable，核心就在于onchange时间的调用，核心代码： 转载于:https://blog.51cto.com/7072870/1408975
MATLAB GUI笔记(三):单选按钮的使用
菜yuan~的博客
11-28 3578
MATLAB GUI的简单笔记
vb html单选按钮,VB教程：单选按钮（OptionButton)
weixin_39719101的博客
06-24 2090
4、单选按钮(Option Button)作用：显示一个可打开/关闭的选项注意:同一组只可选中一个选项。Option Button单选钮控件总是以组的形式出现的。在一组Option Button控件中，总是只有一个单选钮处于选中状态；如果选中了其中的一个，其余单选钮则自动清除为非选中状态。(1)常用属性Caption——指定单选钮所表示的选择项的内容。value——返回或设置单选钮的状态。valu...
Java Swing组件：按钮
最新发布
hitmengfanchao的博客
03-24 1873
本文介绍了Java Swing组件：按钮的使用方法。按钮组件可分为四种：普通按钮（JButton）、切换按钮（JToggleButton）、复选按钮（JCheckBox）和单选按钮（JRadioButton）。
cocos creator 学习随笔 day03 节点和组件属性
winterainicesnow的博客
08-02 2261
节点本身属性 第一栏为节点名，可修改 书籍图标为帮助信息，齿轮是组件不过这里应该叫做节点菜单，因为点进去得时候，出现得不是组件得操作。 Position：相对父节点位置，与世界坐标还是本地坐标无关 Rotation：旋转度，延X轴旋转，延Y轴旋转，延Z轴旋转 Scale：缩放度，延X轴缩放，延Y轴缩放，延Z轴缩放 layer：相机渲染场景，灯光照亮场景，不在范围内，不会展现出来和有亮光。具体看Edit： 组件属性 ...
Bootstrap
zy_lalala的博客
08-24 721
一、Bootstrap简介 1. 什么是Bootstrap？ Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件
Bootstrap（基础）
lixiaohong2012的博客
06-30 2283
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：<script src="https://oss.maxcdn
Bootstrap5学习笔记
weixin_48778425的博客
10-20 1099
一、布局 1.1 网格 先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效 1.2 列 掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字） 1.3 列填充 写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙 二、页面内容 2.1 排版 标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列
iOS 强大第三方资源库
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
JRadioButton（单选按钮）组件
10-05
电子文档，描述界面普通界面设计基础知识，只针度初学者，
MATLAB app designer 制作单选按钮的方法
天外来客的花田
06-09 4910
任务描述：添加单选按钮控件后，如何根据用户不同的选项返回不同的值？ selectedButton = app.ButtonGroup.SelectedObject; switch selectedButton.Text case '允许' A= 1; case '禁止' A= 0; end assignin('base','A',A); %将值返回到MATLAB工作区 Hope this would bring you some inspiration
3-MATLAB APP Design-切换按钮组和单选按钮组
Hou_____的博客
03-11 2819
MATLAB APP Design-切换按钮组和单选按钮组
matlab单选按钮
charie411的博客
06-08 9135
书到用时方恨少最近使用matlab做GUI，需要用到单选按钮，现总结查询到的方法。法一：使能+禁用一种方法是在各个单选按钮的CallBack函数处使能当前单选按钮，同时禁用其他按钮；然后判定按钮value，并返回给新的变量，后续应该是判定新变量，进行后续操作。#使能当前按钮，禁用其余按钮 set(handles.radiobutton1,'value',1); set(handles.radiobu
单选按钮的点击事件
shenxiaomo1688的博客
06-26 1万+
单选按钮的点击事件： HTML代码： &lt;td width="15%" class="td_title"&gt;按设备或医生&lt;/td&gt; &lt;td&gt; &lt;input type="radio" id="sMachineCode" name="choice" value='1' checked=&
vue+elementUI组件tree实现单选加条件禁用
热门推荐
GarenWang的博客
12-26 1万+
elementUI tree：http://element.eleme.io/#/zh-CN/component/tree 官方给出的API还是挺全的，但是示例木有给全，有几个API的说明也不是很能理解～ tree实现带选择框的要加上node-key="id" show-checkbox两个属性， &lt;el-tree ref="tree2" :data="data2" :props="d...
单选按钮使用方法
Beginniqg
05-15 3965
布局代码：完整代码：public class MainActivity extends Activity {    private Button bt; private RadioGroup rg; /* (non-Javadoc) * @see android.app.Activity#onCreate(android.os.Bundle) */ @Override    protected...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值