マルチページ テンプレートを使用するモバイル アプリケーションがあります。このアプリケーションでは、ページが読み込まれたときに選択を無効にし、ラジオ ボタンがクリックされた後に有効にしたいと考えています。私は奇妙なことを見てきました.選択がページ1に置かれている場合、無効化/有効化は機能します(そのスタイルを除く)が、他のページに置かれている場合は機能しません.
コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="mb.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body>
<!-- Start of first page: #page1 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>Test </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is page One</p>
<form name="formC" id="formC" >
<label for="city">CITY: </label>
<select id="city" name="city" >
<option value="1">Sydney</option>
<option value="2">North Ryde</option>
<option value="others">Others</option>
</select>
Operations:
<input id="radioC1" name="city_type" type="radio" value="NO" >
<label for="radioC1"> 1 Disable city menu </label>
<input id="radioC2" name="city_type" type="radio" value="YES">
<label for="radioC2"> 2 Enable city menu </label>
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<a data-role="button" href="#page1" > Page 1 </a>
<a data-role="button" href="#page2" > Page 2 </a>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #page2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is page Two</p>
</div><!-- /content -->
<div data-role="footer">
<a data-role="button" href="#page1" > Page 1 </a>
<a data-role="button" href="#page2" > Page 2 </a>
</div><!-- /footer -->
</div><!-- /page two -->
</body>
</html>
javaScript mb.js のコードを以下に示します。
$(document).ready(function(){
$("#city").prop("disabled", true);
$('input:radio[name="city_type"]').change (
function(){
if ($(this).is(':checked') && $(this).val() == 'YES') {
// alert("Click city_type, Enable");
$("#city").removeAttr('disabled');
// append goes here
} else if ($(this).is(':checked') && $(this).val() == 'NO') {
// alert("Click city_type, Disable");
$("#city").prop("disabled", true);
// append goes here
}
});
});
コードからわかるように、id 'city' の選択を含むフォームがページ 1 に配置されます。この場合、選択は最初は無効になっていますが、そのスタイルはまだ有効に見えます。ラジオボタンをクリックして有効/無効にできます。ただし、フォームをページ 1 からページ 2 に移動した後、選択が機能しません。最初は無効になっていますが、ラジオボタンをクリックして有効/無効にすることができません。
本当に理由はわかりません。jquery と css の異なるバージョンを使用しようとしましたが、問題を解決できませんでした。jquery モバイル マルチページのバグですか? 誰かが問題を解決するのを助けることができれば感謝します。