Why select cannot be disabled/enabled in jquery mobile multi pages?
I have a mobile application which uses the multi-page template. In this
application, I want to disable a select when the page is loaded and then
enable it after a radio button is clicked. I've seen a strange thing: the
disable/enable works (except its style) if the select is put on page 1 but
it doesn't work if is put on other pages.
The following is the code:
<!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>
The code of the javaScript mb.js is shown below:
$(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
}
});
});
As seen from the code, the form which contains a select with id 'city' is
put on page 1. In this case, the select is disabled at the beginning
although its style still looks like enabled. I can enable/disable it by
clicking the radio buttons. However after I've moved the form into page 2
from page 1, the select doesn't work! Although it is disabled at the
beginning, I am not able to enable/disable it by clicking the radio
buttons.
Really I don't know why. I have tried to use different versions of jquery
and css but could not fix the problem. Is it a bug in jquery mobile
multi-pages? Appreciated if some one can help to fix the problem.
No comments:
Post a Comment