HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM FileUploadのdisabledプロパティとは？構文と使い方をサンプルコード付きで解説

HTML DOMのFileUpload disabledプロパティは、HTMLのinput type="file"（ファイルアップロード）要素におけるdisabled属性の値を取得・変更するためのプロパティです。この値をtrueに設定すると、ユーザーはファイルを選択できない状態（無効状態）になります。

構文

disabledプロパティの基本的な構文は以下の通りです。

1. 値の取得（Returning disabled）

object.disabled

2. 値の設定（Setting disabled）

object.disabled = true|false;

trueを設定するとファイルアップロード欄が無効化され、falseを設定すると再度有効化されます。

戻り値

disabled属性が設定されている場合は「true」、設定されていない場合は「false」を返します。

サンプルコード

それでは、FileUpload disabledプロパティを使った具体的な例を見てみましょう。ボタンをクリックするたびに、ファイル選択欄の有効・無効が切り替わる仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        background-color:#397367;
        color:#fff;
        padding:10px;
    }
    p{
        font-size:1.2rem;
    }
    input{
        width:200px;
        border:none;
        margin:10px 0;
    }
    .btn{
        display:block;
        margin:10px 0;
        background-color:#22223B;
        color:#fff;
        border:none;
        height:30px;
        border-radius:50px;
        font-weight:bold;
        padding:0.5rem 1rem;
        cursor:pointer;
        outline:none;
    }
</style>
</head>
<body>
<h1>FileUpload disabledプロパティの例</h1>
<p>ファイルを選択できますか？</p>
<input type="file">
<button onclick="enableDis()" class='btn'>有効化／無効化</button>
<script>
    function enableDis() {
        var chooseFileBtn = document.querySelector("input");
        if(chooseFileBtn.disabled === true){
            chooseFileBtn.disabled = false;
        } else {
            chooseFileBtn.disabled = true;
        }
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM FileUploadのdisabledプロパティとは？構文と使い方をサンプルコード付きで解説

「有効化／無効化」ボタンをクリックすると、ファイルアップロード入力欄の有効・無効が切り替わります。無効化された状態では、ファイル選択欄がグレーアウトしてクリックできなくなります。

HTML DOM FileUploadのdisabledプロパティとは？構文と使い方をサンプルコード付きで解説

まとめ

disabledプロパティを活用すれば、フォームの送信条件が満たされるまでファイル選択を禁止したり、特定の操作中に入力を受け付けないようにするなど、ユーザーインターフェースの制御に役立てることができます。主要なブラウザすべてでサポートされているため、安心して利用できるプロパティです。

  1. HTML DOM Input Text disabledプロパティの使い方を徹底解説

    HTML DOM の Input Text disabled プロパティは、テキストフィールドを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されるプロパティです。値にはブール型（true / false）を指定し、true は「要素を無効にする」、false は「要素を有効のままにする」ことを意味します。デフォルト値は false です。disabled プロパティが true に設定されたテキストフィールドは、グレーアウトして表示され、ユーザーによるクリックや入力操作を受け付けなくなります。フォームの一時的な入力禁止や、特定の条件を満たすまで入力欄をロックしたい場合な

  2. HTML DOMのInput Radio disabledプロパティとは？使い方をわかりやすく解説

    disabledプロパティとはHTML DOMのInput Radio disabledプロパティは、ラジオボタンを無効化するかどうかを設定、または現在の状態を取得するために使用されるプロパティです。ブール値（true / false）で状態を表し、trueなら要素を無効化、falseなら有効のままとなります。デフォルト値はfalseです。disabledが設定された要素はグレーアウトして表示され、ユーザーがクリックして選択することはできません。構文disabledプロパティを設定する場合の構文は以下の通りです。radioObject.disabled = true|false;trueを指定