【JavaScript】inputにdisabled属性で操作できないようにする方法

【JavaScript】inputにdisabled属性で操作できないようにする方法

inputにdisabled属性を付けることで操作できないようになります。

例えば、以下のように設定するとボタン、テキスト、ラジオボタンやチェックボックス操作できないようになることを確認できます。

// 非活性のボタン
<input type="button" value="ボタン" disabled> 
// 非活性のテキスト
<input type="text" value="テキスト" disabled>
// 非活性のラジオボタン
<input type="radio" value="ラジオ" disabled>
// 非活性のチェックボックス
<input type="checkbox" value="チェックボックス" disabled>

●表示結果

↓非活性のボタン↓

↓非活性のテキスト↓

↓非活性のラジオボタン↓

↓非活性のチェックボックス↓

JavaScriptでinput要素取得後、disabled属性を付与し、操作不可とする

　document.getElementByIdやdocument.querySelectorなどでhtmlの要素を取得し、disabled属性を付与すれば、JavaScriptで操作不可とすることが可能になります。

例えば以下のHTMLような場合、ボタン押下後JavaScriptでinput type=”text”の要素を操作不可とできます。

<script>
function dis() {
    let TEXT = document.getElementById('TEXT');
    TEXT.disabled = true;
}
</script>
<input type="button" value="ボタン" onclick="dis()">
<input type="text" id = "TEXT"value="テキスト" >

ボタン押下前

<input type="text" id = "TEXT"value="テキスト" >

ボタン押下後

<input type="text" id = "TEXT" value="テキスト" disabled >

　逆に、非活性のテキストを活性のテキストにする場合は、disabled 属性をfalseとすればよいです。

<script>
function dis() {
let TEXT = document.getElementById('TEXT');
TEXT.disabled = false;
}
</script>
<input type="button" value="ボタン" onclick="dis()">
<input type="text" id = "TEXT"value="テキスト" disabled >

ボタン押下前

<input type="text" id = "TEXT"value="テキスト" disabled >

ボタン押下後

<input type="text" id="TEXT" value="テキスト">

関連記事【JavaScript】inputのvalueを変更する方法

2023.08.30

JavaScript の記事一覧へ