disabled属性で要素を無効にしよう!

disabled属性で要素を無効にしよう!

disabled属性で要素を無効にするには、.prop()を使用します。

disabledか判定するには?

if($('input').prop('disabled')) {
    console.log('無効です');
}

要素が無効か否かを判定するには、.prop()に’disabled’を渡します。

戻り値は、無効であればtrue, 無効でなければfalseです。

サンプルでは、input要素が無効な場合、console.log()でコンソールを出力します。

disabledを解除するには?

$('input').prop('disabled', false);

disabledを解除するには、.prop()の第1引数に’disabled’を渡し、第2引数にfalseを渡します。

サンプルでは、input要素を全て無効にしています。

disabledを設定するには?

$('input').prop('disabled', true);

第2引数にtrueを渡せば、disabledを設定することができます。

disabledの要素をセレクタで選択するには?

$('input:disabled')

セレクタに:disabledを追加することで、無効な要素を選択することができます。

disabledをtoggleするには?

$('input').prop('disabled', function(i, val) {
    return !val;
});

disabledをtoggleするには、.prop()の第2引数にコールバック関数を渡し、現在の値と逆の値を返します。

コールバック関数の引数は、第1引数がインデックス、第2引数が現在の値です。

サンプルでは、例えば、disabledがtrueの場合、現在の値であるvalはtrueです。

!valでvalを否定して返しているため、.prop()で設定する値はfalseになります。

valがfalseの場合はtrueを返すので、結果として、要素の有効、無効が切り替えられます。

select要素でdisabledを使うには?

if($('select').prop('disabled')) {
    console.log('無効です');
}
$('select').prop('disabled', false);

select要素でdisabledを使うには、セレクタでselect要素を指定します。

checkboxでdisabledを使うには?

if($('#checkbox').prop('disabled')) {
    console.log('無効です');
}
$('#checkbox').prop('disabled', false);

checkboxでdisabledを使うには、セレクタでチェックボックスのinput要素を選択します。

$('input[type="checkbox"]').prop('disabled', false);

checkboxは、属性セレクタで選択することもできます。

サンプルは、type属性がcheckboxのinput要素を選択してます。

属性セレクタの使い方は、以下の記事の「属性で選択するには?」を参照してください。

.attr()と.prop()の違いは?

disabledを.attr()で操作することは推奨されないため、jQuery 1.6以上であれば、.prop()を使用しましょう。

disabledを.attr()で判定するには?

if($('input').attr('disabled') === 'disabled') {
    console.log('無効です');
}

.prop()とは異なり、.attr(‘disabled’)の戻り値は、無効であればdisabled文字列、無効でなければundefined(未定義)を返します。

サンプルのようにすれば、.prop()と同様に判定できますが、true/falseで返す.prop()を使用した方が無難です。

disabledを.attr()で解除するには?

$('input').removeAttr('disabled');

disabledを.attr()で解除するには、.removeAttr()に’disabled’を渡し、disabled属性を削除します。

disabledを.attr()で設定するには?

$('input').attr('disabled', 'disabled');

disabledを.attr()で設定するには、第1引数、第2引数に’disabled’を渡します。

disabledとreadonlyの違いは?

disabledを有効にすると、要素が無効になり、編集、選択など全ての操作ができなくなります。

対して、readonlyは、要素の編集は無効になりますが、選択、コピーが可能です。

disabledは、性質上、select要素、checkbox、ボタンにも適用できますが、readonlyは、input要素とtextarea要素のみに対応しています。

readonlyを使うには?

if($('input').prop('readonly')) {
    console.log('無効です');
}

$('input').prop('readonly', false);

.prop()の第1引数を’disabled’から’readonly’に変更すれば、disabledと同様の使い方ができます。

disabledにイベントを追加するには?

jQuery.propHooks.disabled = {
    set: function (el, value) {
        if (el.disabled !== value) {
            el.disabled = value;
            
            if(value) {
                $(el).trigger('disabled');
            } else {
                $(el).trigger('enabled');
            }
        }
    }
};

disabledにイベントを追加するには、jQuery.propHooks.disabledのsetプロパティにコールバック関数を追加します。

jQuery.propHooks.disabled

jQuery.propHooksは、prop()が呼び出されたときにコールバック関数を実行するフックです。

disabledプロパティが指定されているため、prop(‘disabled’)のときに呼び出されます。

set: function (el, value) {
    ...
}

setプロパティにより、.prop()の第2引数に値が指定され、disabledが設定、解除されたときに、コールバック関数が実行されます。

第1引数は選択されている要素、第2引数は.prop()の第2引数で与えられた値です。

if (el.disabled !== value) {
    el.disabled = value;
    
    if(value) {
        $(el).trigger('disabled');
    } else {
        $(el).trigger('enabled');
    }
}

要素のdisabledが与えられた値と異なる、つまりdisabledの状態が変更された場合、.trigger()でイベントを発生させています。

el.disabled = value;

イベントを発生させる前にdisabledの状態を変更し、イベント内で変更後の値を使用できるようにしています。

変更する必要がなければ、省略しても構いません。

if(value) {
    $(el).trigger('disabled');
} else {
    $(el).trigger('enabled');
}

変更後の値がtrue, つまりdisabledがtrueの場合、.trigger()でdisabledイベントを発生させています。

falseの場合、enabledイベントが発生します。

disabledイベントの使い方

$('input').on('disabled', function () {
    console.log('無効になりました');
});

通常のイベントと同様、.on()や.one()を使用し、コールバック関数を追加します。

まとめ

  • disabledか判定するには、.prop()に’disabled’を渡します。
  • disabledを解除、設定するには、第2引数に各々false, trueを渡します。
  • disabledの要素をセレクタで選択するには、:disabledを使用します。
  • disabledをtoggleするには、コールバック関数を使用します。
  • select要素、checkboxでdisabledを使うには、各要素をセレクタで選択します。
  • disabledを操作する場合、.attr()ではなく、.prop()を使うべきです。
  • readonlyは、disabledと同じ様に.prop()で操作できます。
  • disabledにイベントを追加するには、jQuery.propHooks.disabledを使用します。

実践カテゴリの最新記事