解決済み: jQuery 入力の無効化と有効化

最終更新： 09/11/2023
著者： JavaScript ソーストレイル

入力の無効化と有効化に関する主な問題は、予期しない動作を引き起こす可能性があることです。 たとえば、フォームへの入力を無効にすると、ユーザーはフォームを送信できなくなる可能性があります。

 field

To disable an input field in jQuery, use the prop() method. To enable an input field in jQuery, use the removeAttr() method.

Example

You can try to run the following code to learn how to enable and disable input field −

<html> <head> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%20%3D%20%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.2.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%24(document).ready(function()%7B%20%24(%22%23btn1%22).click(function()%7B%20%24(%22input%22).prop(%22disabled%22%2C%20true)%3B%20%7D)%3B%20%24(%22%23btn2%22).click(function()%7B%20%24(%22input%22).removeAttr(%22disabled%22)%3B%20%7D)%3B%20%7D)%3B%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 8 and earlier versions.</p> Name: <input type = "text" id = "test"> <button id = "btn1">Disable</button><br><br><br><br><br><br><br><br><br></body></html>

ボタン

ボタンは jQuery の一般的な要素です。 これらを使用して、単純なボタンを作成することも、イベント ハンドラーを持つより複雑なボタンを作成することもできます。

シンプルなボタンを作成するには、

より複雑なボタンを作成するには、

有効化/無効化

有効化と無効化は、ページ上の要素の可視性を制御できるようにする XNUMX つの jQuery 関数です。

関連記事：