【HTML】使用js给input标签增加disabled属性

目录

1.常规text标签

2.radio标签


1.常规text标签


在JavaScript中,您可以通过修改元素的属性来给input标签增加disabled属性。这可以通过使用setAttribute方法来完成。以下是一个简单的例子:

// 假设您的input元素的id是'myInput'
var inputElement = document.getElementById('myInput');// 给input元素添加disabled属性
inputElement.setAttribute('disabled', 'disabled');

在上面的代码中,getElementById方法用于选择页面中ID为myInput的input元素。然后,setAttribute方法用于添加disabled属性,将其值设置为"disabled"。
这样设置之后,该input元素就会变为不可编辑状态。如果您想要在以后取消disabled属性,可以将值设置为空字符串:

// 取消disabled属性
inputElement.setAttribute('disabled', '');

或者,您也可以使用removeAttribute方法来完全移除该属性:

// 移除disabled属性
inputElement.removeAttribute('disabled');

在实际应用中,请根据您的具体情况选择合适的方法。

2.radio标签


在JavaScript中,您可以通过修改元素的属性来给input元素的radio类型标签增加disabled属性。以下是一个示例代码,展示了如何通过JavaScript为指定的单选按钮(radio button)设置disabled属性:

// 假设您的单选按钮具有一个共同的类名,比如 'myRadio'
var radios = document.querySelectorAll('.myRadio');radios.forEach(function(radio) {// 您可以按需修改这里的条件,以确定哪些单选按钮应该被禁用if (/* 添加您的条件判断 */) {radio.disabled = true;}
});

在上面的代码中,querySelectorAll用于选择所有具有类名myRadio的元素。然后,forEach方法用于遍历这些元素,并在满足您设定条件的情况下设置disabled属性为true。
请根据您的具体情况调整条件判断部分。例如,如果您想禁用所有处于特定状态的按钮,可以检查它们的checked属性或其他相关属性。如果您想根据用户的某些操作动态禁用单选按钮,可以在事件处理函数中添加相应的逻辑。

还可以全局进行禁用,一下是代码示例:

// 获取所有 radio 元素
const radioElements = document.querySelectorAll('input[name="row[status]"]');
// 为每个 radio 元素添加 change 事件监听器
radioElements.forEach(radio => {radio.disabled = true;
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/237789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot(ssm智慧生活商城系统 网上购物系统Java系统

springboot(ssm智慧生活商城系统 网上购物系统Java系统 开发语言:Java 框架:ssm/springboot vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7(或8.0) 数…

2022复盘2023规划(技术篇)

2022复盘&2023规划(技术篇) 说明: 以下是我对我自身知识掌握度的分级解释 Lv0 简单了解技术点的应用场景 Lv1 前端: 掌握基础知识,能进行简单组件的开发与页面绘制; 后端: 掌握知识点基础&a…

力扣 | 136. 只出现一次的数字

给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题,且该算法只使用常量额外空间。 示例 1 : 输入&#xff1a…

Fabric:使用GoLand+Fabric-SDK-Go操作Fabric网络

遇到bug, 未完待续!!! 写在最前 前序博客已经介绍了使用命令的方式在Fabric上创建通道以及部署执行链码的方法,但这个过程太繁琐,尤其是当Fabric网络中peer节点和组织Org过多时,需要频繁的更改环境变量。 Hyperledger Fabric官方提供了Fabri…

Ubuntu 22.04 LTS上安装Docker-ce

在Ubuntu 22.04 LTS上安装Docker-ce Docker是一个开源平台,用于自动化应用程序的部署、扩展和管理。它使用容器技术,使开发、测试和部署过程更加简化和可靠。本文将介绍在Ubuntu 22.04 LTS上安装Docker-ce的步骤。 步骤1:更新软件包列表 …

5~80V降5V 0.3A同步整流降压型DC-DC转换器-AH7550

AH7550是一种TEL:l86*4884*3702*高压、高效率的同步整流降压型DC-DC开关转换器,恒定120KHz开关频率,输出电流能力高达0.6A,AH7550支持5V~80V的宽输入操作电压范围,同时支持最大占空比90%输出,芯片内置环路补…

小型家用超声波清洗机适合清洗眼镜吗?小型超声波清洗机排行榜

在快节奏的现代生活中,我们的眼睛时常与各种物品接触,如眼镜、隐形眼镜等。为了保持眼睛的健康和舒适,定期清洗眼镜变得尤为重要。而随着科技的发展,小型家用超声波清洗机逐渐进入人们的视野,它能否成为我们清洗眼镜的…

学生备考护眼灯什么牌子好推荐?高性能护眼台灯推荐

作为一名电器测评师,对各类电器好物都了解得比较多,最近也会被很多的人询问护眼台灯哪个牌子好,问其原因才知很多的人有使用护眼台灯出现眼睛酸痛刺眼的现象,这是因为使用了不专业护眼台灯导致的,一般这类护眼台灯使用…

基于springboot的日记本系统源码+数据库+安装使用说明

之前写的SpringBoot日记本系统备受好评,考虑到还是有很多小伙伴不会部署,所以这一篇文章就单独来讲一下部署步骤吧。 需要资源 idea(破不破解都行) MySQL(最好5.7以上版本,最好8.0) Navicat…

Linux中一些知识积累(持续补充)

如何安装Eigen3库? 在linux中直接命令安装。Eigen/Dense 是 Eigen 库中的一个模块,提供了对密集矩阵(Dense Matrix)的支持。 sudo apt install libeigen3-devLinux 中VScode中运行C时,gdb 的Launch与Attach有什么区别…

C/C++ 获取系统时间time_t的使用

time_t:它通常是一个长整型(long int),用于表示从特定参考点(通常是 1970年1月1日00:00:00UTC)经过的秒数。这被广泛用作时间戳。 但是time_t获取的时间是一个长整型,可以通过ctime()函数将其转…

K8S 为什么关闭 SELinux 和交换内存

在学习搭建 K8S 环境和使用 K8S 时,所有教程必然会提到的事情就是关闭节点的 SELinux 和交换内存,如同自然规律一样。 那么为什么会有这样的要求呢? 交换内存 计算机的物理内存是有限的,而进程对内存的使用是不确定的&#xff…

js let 和 var 的区别

在 JavaScript 中,let 和 var 都是用来声明变量的关键字,但它们之间存在一些重要的区别: 作用域(Scope):var 在声明变量时具有函数级作用域,这意味着在函数内部用 var 声明的变量在整个函数内部…

探索 Vue3 ( 三 ) Teleport传送组件

Teleport Vue 3.0新特性之一。 Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术; Teleport中的内容允许我们控制在任意的 DOM 中,完全不受父级style样式…

Gartner2023数据库魔力象限发布 阿里云依旧领导者 腾讯退出 EDB/Yugabyte进入

这是一个跨越数年的系列,历史文章参考: * 数据库魔力象限2022:阿里领先、腾讯再次进入 * 2021 藏在魔力象限中的数据库江湖 * Gartner云计算魔力象限2018 概述 Gartner云数据库魔力象限(后简称“象限”或“MQ”)一…

SQL面试题挑战04:找出使用相同ip的用户

目录 问题:SQL解答: 问题: 现在有一张用户登陆日志表,该表包括user_id,ip,log_time三个字段,现在需要找出共同使用ip数量超过3个(含)的所有用户对。比如下面的示例数据,101和102用户共同使用的ip为4个&…

Postman报:400 Bad Request

● 使用Postman发送Post请求报400,入参为JSON; 二、分析 1、Postman请求并没有请求到后台Api(由于语法错误,服务器无法理解请求); 2、入参出错范围:cookie、header、body、form-data、x-www-f…

fastapi 处理请求参数整理

1、路径参数 app.get("/getfilecontent/{id}/{pre}") def get_filecontent(id,pre):"""路径参数,测试接口,读取当前工作目录下的file.txt文件,返回txt中的内容:param id: The ID of the item to retrieve.:param p…

百模大战中的AI行业:新趋势与未来发展

文章目录 每日一句正能量前言技术进步应用拓展行业变革人才竞争后记 每日一句正能量 人生最重要的价值是心灵的幸福,而不是任何身外之物。 前言 随着科技的迅猛发展,人工智能(AI)已经成为引领技术革命的重要驱动力之一。在当前的…

电气 接近开关

npn:和负载(控制器或者继电器)共阳极,低电平响应 pnp:和负载共阴极,高电平响应