jQuery mobileでボタンを無効化/有効化したい

jQuery mobileでボタンを無効化/有効化したくて試したけどなかなかできず嵌ったのでメモ。

  • enable/disable/refreshメソッドがある
  • enable/disableを読んだあとにrefreshを呼ぶ必要がある
  • jQueryで”$(document).ready(function{});”としてたところを、jQuery mobileでは$(document).delegate(“#pageid”, “pageinit”, function(){});とする(?)

確認ページ:hello_jQuery_mobile_button_toggle.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery mobile ボタンの無効化/有効化</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/ -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
	$(document).delegate("#home", "pageinit", function() {
        $('#btnToggle').bind('tap', toggleButtonStatus);
	});

	function toggleButtonStatus() {
		if ($('#btnTarget').attr('disabled') == 'disabled') {
			$('#btnTarget').button('enable');
		}
		else {
			$('#btnTarget').button('disable');
		}
		$('#getTweets').button('refresh');
	}
</script>
</head>

<body>
<!-- Home page -->
<div data-role="page" id="home">
	<div data-role="header">
		<h1>jQuery mobile ボタンの無効化/有効化</h1>
	</div>

	<div data-role="content" align="center">
		<div data-role="controlgroup" data-type="horizontal">
			<input type="button" id="btnToggle" value="本ボタン押下で'ターゲット'の状態が切り替わります" data-inline="true">
			<input type="button" id="btnTarget" value="ターゲット" data-inline="true">
		</div>
	</div>

	<div data-role="footer">
		<h4>Copyright 2012</h4>
	</div>
</div>

</body>
</html>

参考サイト

関連エントリー

  1. jQuery mobileでGoogleマップを表示する(jquery-ui-map)
  2. jQuery mobileのナビゲーションバーとデフォルト設定
  3. はじめてのjQuery mobile
  4. jQuery mobileのフォーム
  5. jQueryでチェックボックスのON/OFF状態を取得したい
This entry was posted in 未分類 and tagged , . Bookmark the permalink.