0

我有一个使用多页模板的移动应用程序。在这个应用程序中，我想在页面加载时禁用选择，然后在单击单选按钮后启用它。我看到了一件奇怪的事情：如果将选择放在第 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 移动多页中的错误吗？感谢有人可以帮助解决问题。

4

1 回答 1

0

我也遇到过类似的问题 - 在没有非常仔细地查看您的代码的情况下，我注意到您正在使用$(document).ready()但您应该使用：

$(document).delegate("#MyPageId", "pagebeforecreate", function () {
});

和

$(document).delegate("#MyPageId", "pageshow", function () {
})

反而。( http://forum.jquery.com/topic/jquery-mobile-equivalent-of-document-ready )

尝试将您的代码移动到这些区域，您会取得一些成功:)

于 2013-09-11T05:12:15.813 回答