もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第13回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(5)デザインされたチェックボックスを実装する

この記事を読むのに必要な時間:およそ 6 分

今回は選択不能とチェックボックスなどをデザイン

前回は疑似セレクトボックスの利用によって,セレクトのデザインを変更する方法をご紹介しました。今回は似たようなこととして,チェックボックスとラジオボタンのデザインを変更する方法をご紹介します。

それと今回はその前に,disabledを利用して,フォームの入力を制限する方法と,それをJavaScriptによって,切り替える方法をご紹介します。

まずは完成サンプルをみてください。

画像

選択不能状態にしておくには,HTMLに「disabled="disabled"」を入れるとできます(次のサンプル参照)。しかし,それを選択可能状態にするにはJavaScriptで操作するしかありません。これをjQueryを使うと,さらに簡単に扱うことができるのです。

完成サンプルにいたるまで,順をおってみてきましょう。

disabled状態のフォーム

まずは実際にdisabled状態で,選択不能状態になっているものを今一度見てみましょう。

disabled状態のフォーム

disabled状態のフォーム

HTMLに直接disabled="disabled"をいれてあります。HTMLに直に書いてしまうと,JSがOFFの環境の人は入力できないままになってしまうことだけは注意が必要です。

ではまず,これを選択可能にするだけのボタンを入れてみましょう。

disabledを解除するボタン

ボタンを押したら選択可能状態にする仕組みを入れてみます。

disabledを削除するボタン部分のScript

jQuery(function($){
    $('button').click(function(){
        $(':disabled','#formDemo').removeAttr('disabled');
        return false;
    });
});

「<button>」のボタンを押すとdisabled="disabled"の属性を削除するサンプルです。

disabled状態になっている要素を取り扱う場合は,jQueryだと「:disabled」というフォーム用のフィルターがあります。(参照:第2回)そのフィルターを利用して,あとはdisabledの属性を削除するだけです。属性の削除は「removeAttr」を使います。

.attr()でdisabledを削除例

removeAttrにてdisabledを削除するほうが確実ですが,「.attr('disabled','')」を使うことでも対応可能です。

しかし,disabled自体不必要になるため,基本的にはremoveAttrを使って削除するほうがいいでしょう。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入