【jQuery】つぶやきattr()&prop()

"disabled"属性を制御したい

textareaとbuttonを関係づけるような実装でハマった話です。

• やりたいこと

  • textareaに何か入力されたらbuttonを有効にする
  • textareaが空ならbuttonを無効にする（=disabled属性を付加する）

• ぼくがかんがえたさいきょうのソースコード

    <textarea name="hoge" id="hoge" cols="30" rows="10"></textarea>

    <!-- 最初はdisabledにしとくで -->
    <button type="submit" id="huga" disabled>
        ボタンやで
    </button>
    <script>
        $(function() {
            $("#hoge").on('input', function(event) {
                // 入力されてるかどうかで属性を制御したるねん
                if ($(this).val() === "") {
                    $("#huga").attr('disabled')
                } else {
                    $("#huga").removeAttr('disabled')
                }
            })
        })
    </script>

• 結果

うんうん。文字を入れてみる。

おお、よしよし。じゃあ一旦消してみよか。

あらら？

再度disabledが付かへん。

２種類の挙動をみせる.attr()

よくよく調べてみると、attr()には引数の数によって、２種類の挙動があるようでした。

①.attr(attributeName, value) ：属性の追加

Set one or more attributes for the set of matched elements. (jQuery API Documentation より)

引数を２つとると、指定した要素に１つ以上の属性をセットします。imgのsrgなんかを追加するときに便利そうです。

<img id="image">
<script>
$(function(){
    $("#image").attr("src", "http://dummyurl.com/img/hoge.jpg");
});

②.attr(attributeName) ：属性値の取得

Get the value of an attribute for the first element in the set of matched elements. (jQuery API Documentation)

引数が１つのとき、attrは与えた属性の値を取ってきます。

<img id="image" src="http://dummyurl.com/img/hoge.jpg">
<script>
$(function(){
    let url = $("#image").attr("src");
    // url の値は "http://dummyurl.com/img/hoge.jpg"
});

要するに、さっきの「さいきょうのソースコード」では、removeAttr()で属性を取り除くことはできたが、属性値を取得する方のattr()を使っているのでdisabledをセットできていないということだったんですね。

論理値にはprops()を

ということで結論を。

disabledのような、trueかfalseのどちらかをとるようなものを論理値といいますが、その制御にはprop()が使えます。

• ぼくがかんがえたさいきょうのソースコード・改

    <textarea name="hoge" id="hoge" cols="10" rows="3"></textarea>
    <button type="submit" id="huga" disabled>
        ボタンやで
    </button>
    <script>
        $(function() {
            $("#hoge").on('input', function(event) {
                if ($(this).val() === "") {
                    $("#huga").prop('disabled', true)
                } else {
                    $("#huga").prop('disabled', false)
                }
            })
        })
    </script>

正確には「属性」をとれるのがattr()、「プロパティ」を操作できるのがprop()ということだそうです。あ、propって"property"の略か！
（→.attr()と.prop()の違いは？）

はー、勉強になった。メモメモ。