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

jQueryを使用してボタンを無効にする方法

Webアプリケーションでボタンを無効にする理由はたくさんあります。ユーザーが売り切れのアイテムをショッピングカートに追加できないようにする場合でも、アクションの実行後にユーザーがボタンをクリックできないようにする場合でも、jQueryにはボタンを直接無効にする方法がありません。

代わりに、prop()を使用します メソッド、ライブラリへの新しい追加—jQuery1.6に登場。これは、選択した要素のプロパティ値を取得するためのソリューションとして導入されました。以前は、これはattr()で実行されていました 属性値を取得するメソッド。

プロパティ値を取得しながら属性値を取得することに関係するメソッドがあると、予測できない結果が生じることがありました。 jQuery 1.6以降、prop() この格差を解決するためにメソッドが導入されました。目的のために、prop()を使用します 「disabled」はHTMLボタン要素のプロパティ値であるため、ボタンを無効にします。

att()の使用について詳しく知りたい場合 対prop() 、簡単な歴史とチュートリアルを読んでください。

prop（）jQuery構文

これで、prop()を使用する理由と方法について説明しました。 、構文を見ることができます。 prop()であることを忘れないでください は単なる別のjQueryメソッドであり、これらのメソッドは選択された要素（この場合はボタン）で呼び出されます。 IDが「btn」のボタンを無効にする方法を見てみましょう。 

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

このHTMLはボタンをレンダリングします。

jQueryを使用してボタンを無効にする方法

ボタンがレンダリングされています！これで、jQuery prop()を使用して、「disabled」のプロパティ値をtrueに設定できます。 。 

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

ご覧のとおり、prop() 値を文字列として受け入れ、2番目の引数にブール値を設定します。ブール値はtrueまたはfalseのいずれかです。これは、ブール値の使用方法をさらに深く掘り下げたガイドです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

jQueryを使用してボタンを無効にする方法

「disabled」プロパティをtrueに設定した後、クリックできないボタンをレンダリングします。構文が理解できたので、これを使用する理由と時期を見てみましょう。次のセクションでは、「売り切れ？」という属性を持つ商品を扱うeコマースサイトを見ていきます。

jQuery prop（）を使用してボタンを無効にする

この例では、商品が売り切れた場合に「カートに追加」ボタンを無効にするショッピングアプリがあります。この例では、単純なHTMLボタンと、売り切れていない場合にアイテムを追加するための

をレンダリングします。 

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

<div>

</div>

ボタンがどのようにレンダリングされるか見てみましょう。

jQueryを使用してボタンを無効にする方法

次に、商品とコールバック関数（後で呼び出すために別の関数に渡される関数）を作成して、上記の

にカートを表示します。商品が完売の場合、ボタンは無効になります。 

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のプロパティがあります。プロパティsoldOutがfalseの場合、

にジャケットが表示されます。 [カートに追加]をクリックして、何が起こるか見てみましょう。

jQueryを使用してボタンを無効にする方法

SoldOutプロパティがfalseに設定されているため、商品を

に表示しました。それが在庫の最後のジャケットだった場合はどうなりますか？ SoldOutプロパティがtrueに設定されている場合に何が起こるかを見てみましょう。 

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

[カートに追加]ボタンが無効になっていることを期待しています。

jQueryを使用してボタンを無効にする方法

それがまさに私たちが望んでいたことです。コールバック関数の条件ステートメントを使用して、[カートに追加]ボタンを無効にすることができました。現在、ユーザーは売り切れたアイテムをカートに追加できません。 eコマースアプリで大きな頭痛の種を避けました！

結論

jQueryでHTMLボタンを無効にする方法を学習したところ、jQueryにはそれを行うための明示的なメソッドがないことがわかりました。これを回避するために、prop()を使用しました ボタンのプロパティ「disabled」をtrueに設定するメソッド。次に、ボタンを無効にすることがどのように役立つかの例を見ました。

Web開発におけるユーザーエクスペリエンスのガイドは不可欠です。このガイドでは、ユーザーエクスペリエンスをガイドするために無効化ボタンを使用しました。ボタンを無効にすると、次のプロジェクトでユーザーエクスペリエンスを向上させるのにどのように役立つかを探ります。


  1. GPEDITまたはREGEDITを使用してWindowsHelloプロンプトを無効にする方法

    この記事では、Windows10でWindowsHelloPINプロンプトを無効にする方法を説明します。WindowsHelloは、Windows 10でのみ使用できる代替パスワードオプションです。このパスワードまたはPINを使用して、さまざまなMicrosoftアプリケーションにサインインできます。 Microsoftストア。一部のユーザーは、Outlookを開くたびに、自分のアカウントでWindowsHelloを使用するように求められると報告しています。 アカウントでWindowsHelloを使用する WindowsHelloプロンプトを無効にする方法 Outlookなどのアプリに

  2. Windows 10でパスワード表示ボタンを無効にする方法は？

    Windows 10には、ユーザーがパスワードを入力するたびにパスワード表示ボタンが用意されています。これは、パスワードが正しいかどうかを再確認するために使用されます。これは、長いパスワードや複雑なパスワードを持っているユーザーにとって非常に便利な機能です。ただし、セキュリティに関係する一部のユーザーは、システムでこの機能を使用したくない場合があります。場合によっては、ユーザーがパスワードを入力したが、入力する前に緊急時にシステムを離れた場合など、これにより他のユーザーにパスワードが公開される可能性があります。したがって、一部のユーザーは、システムでこの機能を無効にする必要があります。この記事