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

目录

1.常规text标签

2.radio标签


1.常规text标签


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

javascript 复制代码
// 假设您的input元素的id是'myInput'
var inputElement = document.getElementById('myInput');

// 给input元素添加disabled属性
inputElement.setAttribute('disabled', 'disabled');

在上面的代码中,getElementById方法用于选择页面中ID为myInput的input元素。然后,setAttribute方法用于添加disabled属性,将其值设置为"disabled"。

这样设置之后,该input元素就会变为不可编辑状态。如果您想要在以后取消disabled属性,可以将值设置为空字符串:

javascript 复制代码
// 取消disabled属性
inputElement.setAttribute('disabled', '');

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

javascript 复制代码
// 移除disabled属性
inputElement.removeAttribute('disabled');

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

2.radio标签


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

javascript 复制代码
// 假设您的单选按钮具有一个共同的类名,比如 'myRadio'
var radios = document.querySelectorAll('.myRadio');

radios.forEach(function(radio) {
    // 您可以按需修改这里的条件,以确定哪些单选按钮应该被禁用
    if (/* 添加您的条件判断 */) {
        radio.disabled = true;
    }
});

在上面的代码中,querySelectorAll用于选择所有具有类名myRadio的元素。然后,forEach方法用于遍历这些元素,并在满足您设定条件的情况下设置disabled属性为true。

请根据您的具体情况调整条件判断部分。例如,如果您想禁用所有处于特定状态的按钮,可以检查它们的checked属性或其他相关属性。如果您想根据用户的某些操作动态禁用单选按钮,可以在事件处理函数中添加相应的逻辑。

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

javascript 复制代码
// 获取所有 radio 元素
const radioElements = document.querySelectorAll('input[name="row[status]"]');
// 为每个 radio 元素添加 change 事件监听器
radioElements.forEach(radio => {
    radio.disabled = true;
});
相关推荐
没有名字的小羊23 分钟前
Cyber Security 101-Web Hacking-Burp Suite: The Basics(Burp Suite:基础知识)
前端·网络·测试工具·安全·web安全
SomeB1oody37 分钟前
【Rust自学】9.3. Result枚举与可恢复的错误 Pt.2:传播错误、?运算符与链式调用
开发语言·前端·rust
CodeCraft Studio42 分钟前
【实用技能】如何使用 Web 技术帮助提高 Java 桌面应用程序的可访问性
java·开发语言·前端·chrome
诗歌难吟46442 分钟前
初始值变量类型
java·前端·javascript
Stanford_110644 分钟前
关于单片机的基础知识(一)
前端·c++·单片机·嵌入式硬件·微信公众平台·twitter·微信开放平台
江停不会写代码1 小时前
VUE3组合式——响应式数据ref、reactive
前端·vue.js
等一场春雨1 小时前
javascript e.preventDefault() 的作用和用法
开发语言·javascript·react.js
赔罪1 小时前
HTML - <a>
java·前端·redis·vscode·html·webstorm
onejason1 小时前
利用PHP爬虫获取店铺的所有商品信息
前端
长风清留扬1 小时前
小程序与物联网(IoT)融合:开启智能生活新篇章
javascript·css·物联网·微信小程序·小程序·生活