1.常規(guī)text標(biāo)簽

在JavaScript中，您可以通過修改元素的屬性來給input標(biāo)簽增加disabled屬性。這可以通過使用setAttribute方法來完成。以下是一個簡單的例子：

// 假設(shè)您的input元素的id是'myInput'
var inputElement = document.getElementById('myInput');

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

在上面的代碼中，getElementById方法用于選擇頁面中ID為myInput的input元素。然后，setAttribute方法用于添加disabled屬性，將其值設(shè)置為"disabled"。
這樣設(shè)置之后，該input元素就會變?yōu)椴豢删庉嫚顟B(tài)。如果您想要在以后取消disabled屬性，可以將值設(shè)置為空字符串：

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

或者，您也可以使用removeAttribute方法來完全移除該屬性：

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

在實際應(yīng)用中，請根據(jù)您的具體情況選擇合適的方法。

2.radio標(biāo)簽

在JavaScript中，您可以通過修改元素的屬性來給input元素的radio類型標(biāo)簽增加disabled屬性。以下是一個示例代碼，展示了如何通過JavaScript為指定的單選按鈕（radio button）設(shè)置disabled屬性：

// 假設(shè)您的單選按鈕具有一個共同的類名，比如 'myRadio'
var radios = document.querySelectorAll('.myRadio');

radios.forEach(function(radio) {
    // 您可以按需修改這里的條件，以確定哪些單選按鈕應(yīng)該被禁用
    if (/* 添加您的條件判斷 */) {
        radio.disabled = true;
    }
});

在上面的代碼中，querySelectorAll用于選擇所有具有類名myRadio的元素。然后，forEach方法用于遍歷這些元素，并在滿足您設(shè)定條件的情況下設(shè)置disabled屬性為true。

請根據(jù)您的具體情況調(diào)整條件判斷部分。例如，如果您想禁用所有處于特定狀態(tài)的按鈕，可以檢查它們的checked屬性或其他相關(guān)屬性。如果您想根據(jù)用戶的某些操作動態(tài)禁用單選按鈕，可以在事件處理函數(shù)中添加相應(yīng)的邏輯。

還可以全局進行禁用，一下是代碼示例：

// 獲取所有 radio 元素
const radioElements = document.querySelectorAll('input[name="row[status]"]');
// 為每個 radio 元素添加 change 事件監(jiān)聽器
radioElements.forEach(radio => {
    radio.disabled = true;
});

附：input屬性disabled和readonly的區(qū)別

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屬性修飾后的文本框內(nèi)容，在不可編輯的同時，通過js也是獲取不到的。例如$("input [name='aaa']").val()是不好用的。但是用readonly修飾后的文本框內(nèi)容，是可以通過js獲取到的，也就只是簡單的不可編輯而已！

3.disabled屬性對input文本框，單選radio,多選checkbox都適用，但是readonly就不適用，用它修飾后的單選以及多選按鈕仍然是可以編輯狀態(tài)的。

總結(jié) 

到此這篇關(guān)于HTML使用js給input標(biāo)簽增加disabled屬性的文章就介紹到這了,更多相關(guān)js給input增加disabled屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論