目錄
使用removeAttribute()方法
使用者可以依照下列語法使用removeAttribute()方法從輸入元素中刪除「disabled」屬性。
在 remvoeDisabled() 函數中,我們透過 id 存取輸入元素。之後,我們透過將輸入元素作為引用並傳遞「disabled」作為參數來執行removeAttribute()方法。
使用者可以依照下面的語法將disabled屬性的值修改為false。
在下面的範例中,我們建立了多個文字輸入元素,預設會全部停用。在 JavaScript 中,我們存取所有輸入元素並使用 forEach() 方法對輸入的節點清單進行迭代。在forEach()方法內部,我們將每個輸入的disabled屬性的值修改為false。
範例2
首頁 web前端 js教程 如何使用 JavaScript 從 HTML 輸入元素中刪除「停用」屬性?

如何使用 JavaScript 從 HTML 輸入元素中刪除「停用」屬性?

Aug 31, 2023 pm 01:17 PM

如何使用 JavaScript 从 HTML 输入元素中删除“禁用”属性?

在 HTML 中,我們可以使用輸入元素透過建立表單或以任何其他方式從使用者那裡取得輸入。輸入元素有不同類型,例如複選框、單選按鈕、文字、數字等。

我們可以對每個元素使用「disabled」屬性來停用輸入欄位並阻止使用者與輸入元素互動。在某些情況下,我們需要使用 JavaScript 來新增和刪除停用屬性。例如,我們想要取得年齡大於 18 歲的使用者的泛卡號。因此,我們要求透過從 JavaScript 中刪除停用屬性,僅當使用者輸入大於 18 歲的年齡時才啟用泛卡輸入欄位。

在這裡,我們將學習使用 JavaScript 從 HTML 輸入元素中刪除禁用屬性的各種方法。

使用removeAttribute()方法

在第一種方法中,我們將使用removeAttribute()方法來刪除已停用的屬性。它用於從 HTML 元素中刪除我們作為方法參數傳遞的任何屬性。

###句法###

使用者可以依照下列語法使用removeAttribute()方法從輸入元素中刪除「disabled」屬性。

雷雷

在上面的語法中,我們將屬性名稱「disabled」作為方法的參數傳遞。

###例###

在下面的範例中,我們在 HTML 部分定義了文字輸入欄位。每當使用者點擊該按鈕時,它都會呼叫removeDisabled()函數。

在 remvoeDisabled() 函數中,我們透過 id 存取輸入元素。之後,我們透過將輸入元素作為引用並傳遞「disabled」作為參數來執行removeAttribute()方法。

在輸出中,使用者可以觀察到他們在單擊按鈕之前無法與輸入元素交互,但在單擊按鈕後可以與輸入元素交互。

雷雷

修改「停用」屬性

在這個方法中,我們將修改「disabled」屬性的值,而不是從 HTML 元素中刪除「disabled」屬性。 “disabled”屬性採用布林值。停用屬性的預設值為“true”,但我們可以將其設為“false”,它的工作方式與我們從任何輸入元素中刪除“disabled”屬性相同。

###句法###

使用者可以依照下面的語法將disabled屬性的值修改為false。

雷雷

範例1

在下面的範例中,我們建立了多個文字輸入元素,預設會全部停用。在 JavaScript 中,我們存取所有輸入元素並使用 forEach() 方法對輸入的節點清單進行迭代。在forEach()方法內部,我們將每個輸入的disabled屬性的值修改為false。

在輸出中,使用者可以觀察到點擊按鈕後所有輸入元素都難以處理。

雷雷

範例2

在下面的範例中,我們建立了多個複選框輸入,並向所有核取方塊新增了停用屬性以停用它們。在removeDisable()函數中,我們存取所有複選框並修改每個複選框的“disabled”屬性。

雷雷

我們學會了使用 JavaScript 從輸入元素中刪除停用屬性。在第一種方法中,我們使用了removeAttribute()方法,該方法從輸入元素中刪除已停用的屬性。在第二個元素中,我們修改了停用屬性的值,而不是將其從 HTML 元素中刪除,但我們能夠實現啟用輸入元素的目標。

以上是如何使用 JavaScript 從 HTML 輸入元素中刪除「停用」屬性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

See all articles