jQueryでボタンを無効化する方法!prop()メソッドの使い方を実例付きで解説

jQueryでボタンを無効化するには?

Webアプリケーションでボタンを無効にしたい場面は多々あります。たとえば、売り切れの商品をショッピングカートに追加されるのを防ぎたいケースや、一度処理を実行した後にユーザーにボタンを再クリックさせたくないケースなどが挙げられます。

しかし、jQueryにはボタンを直接無効化するための専用メソッドは用意されていません。代わりに活用するのがprop()メソッドです。prop()はjQuery 1.6で追加された比較的新しいメソッドで、選択した要素のプロパティ値を取得・設定するために導入されました。

それ以前はattr()メソッドで属性値を取得するのが一般的でしたが、属性値とプロパティ値という性質の異なるものを1つのメソッドで扱う仕組みでは、予測できない結果が生じることがありました。この問題を解消するために、jQuery 1.6でprop()メソッドが登場したのです。

「disabled」はHTMLのbutton要素が持つプロパティであるため、ボタンを無効化する際にはprop()を使用します。attr()とprop()の違いについてさらに詳しく知りたい方は、公式ドキュメントや関連チュートリアルを参照するとよいでしょう。

prop()メソッドの基本構文

prop()を使う理由と概要がわかったところで、具体的な構文を見ていきましょう。prop()も他のjQueryメソッドと同様に、セレクタで選択した要素に対して呼び出します。ここでは、idが「btn」のボタンを無効化する例を紹介します。

<button id='btn' type='submit'>
Button is Disabled
</button>

このHTMLをブラウザで表示すると、次のようなボタンが描画されます。

ボタンが正しく表示されました。続いて、jQueryのprop()メソッドを使って「disabled」プロパティをtrueに設定してみましょう。

$('#btn').prop('disabled', true)

ご覧のとおり、prop()の第1引数にはプロパティ名を文字列で指定し、第2引数にはブール値(true / false)を渡します。ブール値とは「真(true)」か「偽(false)」の2値のことです。

なお、無効化したボタンを再度有効化したい場合は、第2引数にfalseを指定すればOKです。

// ボタンを再有効化する
$('#btn').prop('disabled', false)

「disabled」プロパティをtrueに設定すると、クリックしても反応しないボタンが表示されます。ここまでで構文は理解できたので、次に「なぜ・いつボタンを無効化すべきなのか」を実際の例で見ていきましょう。次のセクションでは、「sold-out(売り切れ)」状態を持つ商品を扱うECサイトを題材にします。

実例:prop()で「カートに追加」ボタンを無効化する

ここからの例では、商品が売り切れたときに「Add to Cart(カートに追加)」ボタンを自動的に無効化するショッピングアプリを作成します。まずはシンプルなHTMLボタンと、商品情報を表示するための<div>要素を用意しましょう。

<button class='add' type='submit'>
Add to Cart
</button>

<div>

</div>

ボタンの表示結果は以下のとおりです。

次に、商品データを表すオブジェクトと、コールバック関数(他の関数に渡されて後から呼び出される関数)を作成し、上記の<div>内にカートの内容を表示できるようにします。もし商品が売り切れていたら、ボタンを無効化する仕組みです。

const product = {
  name: 'Jacket',
  price: 50.00,
  soldOut: false
}

$(document).ready(function() {
  $('button.add').click(function(event) {
    event.preventDefault()
    alert(JSON.stringify(product.soldOut))
    if (product.soldOut) {
      $('.add').prop('disabled', true)
    } else {
      $('div').append(product.name)
    }
  })
})

ここではproductという変数にオブジェクトを格納しました。このオブジェクトは、name(商品名)、price(価格)、soldOut(売り切れかどうか)という3つのプロパティを持っています。soldOutがfalseの場合、<div>内にジャケット(Jacket)が表示されるはずです。実際に「Add to Cart」をクリックして動作を確認してみましょう。

soldOutがfalseだったため、商品名が<div>に表示されました。では、これが店頭最後のジャケットだったらどうなるでしょうか?soldOutをtrueに変更した場合の挙動を確かめてみます。

const product = {
  name: 'Jacket',
  price: 50.00,
  soldOut: true
}

この状態でページを読み込み、「Add to Cart」ボタンをクリックすると、ボタンが無効化されるはずです。

まさに期待どおりの結果です。コールバック関数内の条件分岐(if文)によって「Add to Cart」ボタンを無効化できました。これにより、ユーザーは売り切れ商品をカートに追加できなくなります。ECサイトで起こりがちな「売り切れ商品の注文」というトラブルを未然に防げるのです。

まとめ

本記事では、jQueryでHTMLボタンを無効化する方法を学びました。jQueryにはボタンを直接無効化する専用メソッドは存在しませんが、prop()メソッドを使ってbutton要素の「disabled」プロパティをtrueに設定することで、簡単にボタンを無効化できます。また、ECサイトの「カートに追加」ボタンを例に、ボタン無効化が実務でどのように役立つのかも確認しました。

Web開発において、ユーザーエクスペリエンス(UX)を適切に導くことは非常に重要です。ボタンの無効化は、ユーザーに「押せるボタン」と「押せないボタン」を明示し、迷いなく操作してもらうための有効な手段です。ぜひ次のプロジェクトでも、ボタンの無効化をUX改善のテクニックとして活用してみてください。