HTML使用js给input标签增加disabled属性的方法

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;
});

附：input属性disabled和readonly的区别

1.disabled和readonly使用实例

disabled写法：<input type="text" name="aaa" value="xxx" disabled />

readonly写法：  <input type="text" name="bbb" value="xxx" readonly />

2.两种写法的相同点：

 都会使文本框变成只读，不可编辑

3.两种写法的不同点： 

1.disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。

2.disabled属性修饰后的文本框内容，在不可编辑的同时，通过js也是获取不到的。例如$("input [name='aaa']").val()是不好用的。但是用readonly修饰后的文本框内容，是可以通过js获取到的，也就只是简单的不可编辑而已！

3.disabled属性对input文本框，单选radio,多选checkbox都适用，但是readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的。

总结 

到此这篇关于HTML使用js给input标签增加disabled属性的文章就介绍到这了,更多相关js给input增加disabled属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论