开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js设置radio选中不可变

在JavaScript中，要设置一个radio（单选按钮）为选中状态并且使其不可更改，可以通过以下步骤实现：

基本概念

Radio Button（单选按钮）：一组单选按钮中，用户只能选择一个选项。
Checked 属性：用于设置或返回单选按钮是否被选中。
Disabled 属性：用于禁用单选按钮，使其无法被点击或更改。

实现方法

设置选中状态：使用checked属性。
设置不可更改状态：使用disabled属性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Example</title>
</head>
<body>
    <form>
        <input type="radio" id="option1" name="options" value="Option 1">
        <label for="option1">Option 1</label><br>
        <input type="radio" id="option2" name="options" value="Option 2" checked disabled>
        <label for="option2">Option 2 (Selected and Disabled)</label><br>
        <input type="radio" id="option3" name="options" value="Option 3">
        <label for="option3">Option 3</label>
    </form>

    <script>
        // 通过JavaScript设置第二个单选按钮为选中且不可更改
        document.addEventListener("DOMContentLoaded", function() {
            var option2 = document.getElementById("option2");
            option2.checked = true;
            option2.disabled = true;
        });
    </script>
</body>
</html>

解释

HTML部分：
- id和for属性用于关联标签和单选按钮，提高可访问性。
- 第二个单选按钮（option2）初始状态为选中且禁用。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取第二个单选按钮元素，并设置其checked属性为true，disabled属性为true。

应用场景

表单验证：在某些情况下，可能需要预先选择某个选项并禁止用户更改，例如默认选项或必选项。
展示状态：用于展示某些固定的状态信息，不允许用户修改。

注意事项

禁用单选按钮后，该按钮的值不会被提交到表单数据中。如果需要提交固定值，可以考虑使用隐藏字段。
确保用户体验，避免过度使用禁用状态，以免影响用户操作流程。

通过上述方法，可以有效地设置单选按钮为选中且不可更改的状态，满足特定需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

checkbox选中和不选中 jqu_jquery怎么设置checkbox不选中？

jquery怎么设置checkbox不选中？ jquery对checkbox进行操作需要使用prop()方法。...1、设置不选中：$(“#my-checkbox”).prop(“checked”,false); 2、设置选中：$(“#my-checkbox”).prop(“checked”,true); 3、获取选中的状态...：let status = $(“#my-checkbox”).prop(“checked”); prop() 方法设置或返回被选元素的属性和值。...当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

3.7K1 0

checkbox选中和不选中的值_设置checkbox选中状态

1.设置选中：$(“#hasApply”).prop(“checked”,true); 设置不选中：$(“#hasApply”).prop(“checked”,false); 或如下方法： // $(...“#ck”).attr(“checked”,true)//选中 // $(“#ck”).attr(“checked”,false)//未选中 2.获取选中的状态：var status = $(“#hasApply...”).prop(“checked”); 3.判断checkbox是否选中的3种方法方法一： if ((“#checkbox-id”).get(0).checked) { // do something...((‘#checkbox-id’).attr(‘checked’)) { // do something } 注意：在jQuery1.6版本之后，这个方法返回的是undefined；取复选框有没有被选中...，要用prop，返回true/false if((‘#checkbox-id’).prop(‘checked’)) { 　　//do something } 获取选择 radio 的值发布者：全栈程序员栈长

7.8K2 0

js原生、jquery单选框radio总结（获取值、设置默认选中值、样式）

label标签的两种使用方法： https://blog.csdn.net/qq_40015157/article/details/110850331 二、js原生 1、js原生获取选中的值 var...、js原生设置选中 var tesObj = document.getElementsByName("killOrder"); //设置value值为0选中 for(var i=0; i < tesObj.length...https://blog.csdn.net/qq_40015157/article/details/110823718 2.设置第一个radio为选中值： $('input:radio:first')....('checked', 'checked'); $('input:radio:first').attr('checked', true); 3.设置最后一个radio为选中值： $('input:radio...$('input:radio').slice(1,2).attr('checked', true); 5.根据value值设置radio为选中值 $("input:radio[value='2']").

9.6K6 0

jquery 获取或设置radio单选框选中值的方法

jquery 获取或设置radio单选框选中值的代码 1、获取选中值，三种方法都可以： 2、设置第一个Radio为选中值： 3、设置最后一个Radio为选中值： 4、根据索引值设置任意一个radio为选中值...： 5、根据Value值设置Radio为选中值 6、删除Value值为rd2的Radio 7、删除第几个Radio 8、遍历Radio 1、获取选中值，三种方法都可以： $('input:radio:checked..., ‘true’)= attr(“checked”, true) 3、设置最后一个Radio为选中值： $('input:radio:last').attr('checked', 'checked'...); 或者 $('input:radio:last').attr('checked', 'true'); 4、根据索引值设置任意一个radio为选中值： $('input:radio').eq(索引值...或 $('input:radio').slice(1,2).attr('checked', 'true'); 5、根据Value值设置Radio为选中值 $("input:radio[value=http

6.9K4 1

js设置下拉框选中后change事件无效解决

change事件来动态改变"smallType"下拉框的值的话，代码如下： jQuery("#bigType").change(function(){ //do something }); 那么，通过js...设置"bigType"某项选中后，如： jQuery("#bigType option[value="1"]").attr("selected","selected") //jQuery("#bigType...contains("xiamen")").attr("selected","selected") 该change事件不会自动触发，解决办法：自定义change方法，在下拉框中添加onchage事件并传参(当前选中的

11.9K0 0

js存入缓存_redis不设置过期时间

前端js使用localStorage的时候只能存字符串,不能存储对象 cz-storage 可以存储 object undefined number string 2. localStorage没有过期时间...cz-storage 可以设置以天为单位的过期时间 3. github地址安装 yarn add cz-storage || npm i cz-storage 使用 import LS from

4.5K2 0

前端拾零01—checkbox&radio&select总结【原创】

// js设置check1选中 document.getElementById('check1').checked = true // jq设置check2不选中 $("#check2").prop(..." // js document.querySelectorAll(selector) // jq $(selector) 2. radio 设置选中 // js设置value=1选中 document.querySelector...("input[type='radio'][name='cs-radio'][value='1']").checked = true // jq prop设置value=2不选中 $("input[type...=radio][name='cs-radio'][value=2]").prop("checked", false) // jq attr设置value=3选中 $("input[type=radio]...js document.querySelector(selector) // jq $(selector) 3. select 设置选中 // js选择value="csxiaoyao" document.querySelector

2.4K3 0

前端拾零01—checkbox&radio&select总结

// js设置check1选中 document.getElementById('check1').checked = true // jq设置check2不选中 $("#check2").prop(..." // js document.querySelectorAll(selector) // jq $(selector) 2. radio 设置选中 // js设置value=1选中 document.querySelector...("input[type='radio'][name='cs-radio'][value='1']").checked = true // jq prop设置value=2不选中 $("input[type...=radio][name='cs-radio'][value=2]").prop("checked", false) // jq attr设置value=3选中 $("input[type=radio]...js document.querySelector(selector) // jq $(selector) 3. select 设置选中 // js选择value="csxiaoyao" document.querySelector

4.1K66 0

checkbox(复选框)和radio(单选按钮)的区别与详解

选中和取消选中一个 checkbox(复选框) 后，再次点击它，即可取消选中选中一个 radio(单选按钮) 后，再次点击它，不能取消选中 radio"> checkbox“单选”和多选默认情况下（不设置name属性时），是点了几个 checkbox...如果要实现只能同时选中一个 checkbox，可以用 js 代码来控制也就是说，checkbox 所谓的“单选”是不受其 name 属性的值的影响的，具体可以看下面的演示和代码 <!...单选和多选默认情况下（不设置name属性时），也是点了几个 radio 就有几个 radio 被选中，并且选中后再次点击不可取消选中，除非重置或者刷新页面等但 radio 既然是单选按钮，肯定是可以实现单选的操作的...，这时只要设置每个 radio 的 name 属性的值一样就可以实现单选操作，也就是始终只会有一个 radio 被选中要实现 radio 的多选操作，除了前面说的默认情况以外，还可以通过设置其

6K1 0

Form表单类组件与Map地图组件

switch组件的名称 checked属性设置该switch组件是否为选中状态，true为选中，false为不选中，不设置该属性的话默认为false color属性设置该switch组件的颜色样式代码如下...以上设置的是100，那么每拖动一次就会递增100 value属性设置该slider组件默认选中的值 show-value属性显示该slider组件当前被选中的值样式代码如下： .title{ color.../radio> radio-group> 说明： disabled属性设置该radio组件为禁用状态样式代码如下： .title...; color: #666; } .radio_view label { margin-left: 20rpx; margin-right: 20rpx; } js代码如下： onRadioChange...bindmarkertap表示点击mark点时会触发的事件 polyline属性用于设置地图的mark点路线信息 js代码如下： Page({ // 初始化一些数据 data: { /

1.3K3 0

Vue.js -表单控件绑定原

" id="one" value="One" v-model="picked"> One radio...selected: "" } }) //在下拉列表中，请选择的value属性设置为空，否则option初始化显示为空，其余的option的value属性不设置，也不能设置为空...，因为显示的内容优先显示value的值而不是option的内容如果v-model表达初始的值不匹配任何选项（为空），select元素会以“未选中”的状态渲染...-- 当选中时，`picked` 为字符串 "a" --> radio" v-model="picked" value="a"> 设置value --> <input type="checkbox

5.7K3 0

下拉菜单11+原生js获取select下拉框的selected的option项

()); //拿到选中项的文本 [2]js数组转json并在后台对其解析具体实现想必大家在开发过程中也遇到类似问题，如果直接将js获取的数组传给后台，后台是无法区分数组的，因为js数组如果是二维的就是这样的...： $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr(...'); //设置单选框value=2的为选中状态....： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr("value...： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr("value

7974 0

小程序开发笔记

小程序允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统在wxml中添加一段小程序的布局代码 {{ message }} 在data对象中定义一个message变量，并给变量设置一个值...] } 运行结果给标签绑定一个点击时的回调函数在wxml中添加一个标签，并给标签绑定一个点击时的回调函数下一步在js...文件中添加js代码 const app = getApp() Page({ /** * 页面的初始数据 */ data: { //当前选中项的索引...(e.target.id) }); } } }) 以上选项都不选中这次小程序中还有一个需求，在多选中有一个以上选项都不选中按钮，当选中以上选项都不选中时...，之前选中的选项由选中状态变为不选中状态，当选中除以上选项都不选中的其他选项时，以上选项都不选中的选项变为不选中状态实现代码 wxml中的布局代码如下 <wxs src=".

4.2K2 0

Vue的使用

--导入vue--> js/vue.js"> new Vue({ el:'ccs选择器' }) 可变--> 改变值我们可以通过input框,输入值改变msg变量的值 ...--单选框：v-model="变量存放的是某个单选框的value值，代表该选框选中"--> 男radio" name="sex" value="male" v-model...--群复选框：v-model="存放选中选框value的数组"--> <!...关于内存中的调用 localStorage.key名称 sessionStorage.key名称 v-if|v-elif|v-else: 注意点 if如果生效就不往下走同理elif也一样 else前面不生效即使他设置了

7422 0

【Vue.js——ElementUi】element-ui 组件二次封装（蓝桥杯真题-2276）【合集】

/ boolean 事件参数：事件名称说明回调参数 change 绑定值变化时触发的事件选中的 Radio label 值挑战需求请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称...：点击该按钮时，调用 setCurrent 方法不传递参数，用于取消选择。...$refs.singleTable.setCurrentRow(row) 设置表格的当前选中行，如果 row 为 null 则取消选择。...handleRadioChange(row)：当单选按钮状态改变时调用，调用 setCurrent 方法将当前选中的行设置为高亮。...编写方法：在的 methods 中编写处理逻辑，如设置选中行、处理单选按钮状态改变等。

871 0

CSS中如何修改浏览器自带样式

---- 如下代码，使用选择器选中了radio与checkbox,但设置的样式不生效 input[type="radio"],input[type="checkbox"] { border:...input:checked { border: 6px solid black; } 3. appearance属性介绍 ---- 默认情况下，单选按钮（和复选框）使用这些控件的操作系统本机样式设置样式...在最新的浏览器中，差异较小 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/radio 4....代替appearance,修改浏览器自带样式（如:radio） ---- 不需要用到js, 而是纯css, 个人推荐使用此方法，巧用了将radio隐藏，然后通过label的for属性来改变radio的选中状态...从而无需使用js html: radio" name="paixu" id="paixu1" checked> <label for="paixu1" style

1.7K1 0

CSS魔法堂：改变单选框颜色就这么吹毛求疵！

若抛开input[type=radio]重新开发一个，发现要模拟选中、未选中、不可用等状态很繁琐，而涉及单选框组就更烦人了，其实我们可以通过label、::before、:checked和tabindex...1.3.设置为disabled的样式 color: rgb(84, 84, 84); 2.行为特征单选框的行为特征，明显就是选中与否，及选中状态的改变事件，因此我们必须保持对外提供change事件...: border-box; width: 12px; height: 12px; } .radio__appearance{ display: block; /* 设置为block则不受...#999 auto 5px; } /* 通过鼠标单击获得焦点时，outline效果不生效 */ label.radio.clicked{ outline: none 0; } /* 自定义单选框的行为主要是基于原生单选框的...但由于label控件自身的限制，如默认不是可获得焦点元素，因此无法传递键盘按键事件到单选框，即使添加tabindex特性也需手写JS来实现；当tabindex大于等于0时表示该元素可以获得焦点，为0时表示根据元素所在位置安排获得焦点的顺序

2.9K3 0

jquery校验规则的使用

/js/jquery.js" type="text/javascript"> js/jquery.validate.js" type="text/javascript"> 设置唯false就用其他方法去验证 onfocusout：Boolean Default: true 失去焦点是验证(不包括checkboxes/radio buttons) onkeyup：...和checkbox、select的验证 radio的required表示必须选中一个 radio" id="gender_male" value="m" name="gender...}" /> checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 <input type="checkbox

5K3 0

【Flutter 专题】109 图解自定义 ACERadio 单选框

8.0，因此 Radio 所在的范围是不可变更的，这也是和尚准备自定义 ACERadio 扩展方向之一； switch (widget.materialTapTargetSize ??...& 不可选颜色 Radio 并未提供未选中状态和不可选中状态按钮颜色；和尚分析源码，发现未选中状态与 ThemeData.unselectedWidgetColor 颜色对应，不可选中状态与...ACERadio 为了更灵活的应用 Radio 单选框，和尚准备在此基础上扩展如下几个方面：动态设置未选中状态颜色；动态设置不可选中状态颜色；动态设置选中框按钮尺寸；添加状态...未选中状态 & 不可选中状态未选中状态 & 不可选中状态可以通过 ThemeData 来动态修改，和尚为了方便，添加了 unCheckedColor & disabledColor 可直接进行设置...选中框按钮尺寸 Radio 单选框尺寸是固定的，和尚为了更方便的修改，添加了 radioSize 尺寸来动态修改按钮尺寸，且在动态设置按钮尺寸之后依旧支持最小点击范围的三种样式； return Column

1.6K4 0

JQuery学习—JQuery-Validation 使用

必须输入正确格式的日期 (6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性...required:true 必须有值 required:"#aa:checked"表达式的值为真，则需要验证 required:function(){}返回为真，表时需要验证后边两种常用于，表单中需要同时填或不填的元素...设置唯false就用其他方法去验证 onfocusout：Boolean Default: true 失去焦点是验证(不包括checkboxes/radio buttons) onkeyup：Boolean...和checkbox、select的验证 radio的required表示必须选中一个 radio" id="gender_male" value="m" name="gender...}" /> checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 <input type="checkbox

4.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭