Question

我有一个使用多页模板的移动应用程序。在此应用程序中，我想在加载页面时禁用选择，然后在单击单选按钮后启用它。我看到了一个奇怪的事情：如果将select放在第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'的select的表单放在第1页上。在这种情况下，虽然它的样式看起来仍然是启用的，但是在开始时禁用了select。我可以通过单击单选按钮启用/禁用它。但是，在我将表单从第1页移到第2页后，选择不起作用！虽然它在开始时被禁用，但我无法通过单击单选按钮来启用/禁用它。

真的我不知道为什么。我试图使用不同版本的jquery和css但无法解决问题。这是jquery移动多页面中的错误吗？如果有人可以帮助解决问题，那就表示赞赏。

Answer 1

我遇到了类似的问题 - 如果不仔细查看代码，我注意到您使用的是$(document).ready()，但您应该使用：

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

和

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

代替。（http://forum.jquery.com/topic/jquery-mobile-equivalent-of-document-ready）

尝试将代码移到这些区域，您将获得一些成功：）

为什么选择无法在jquery移动多页中禁用/启用？

1 个答案: