2017-06-02 49 views
-1

禁用移动元素,比如我有以下代码:Javascript代码不上桌面

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="css/w3.css"> 
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu'> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 

<style> 
html,body,h1,h2,h3,h4,h5,h6,p,input {font-family: "Ubuntu", sans-serif} 
</style> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="jqw.js"></script> 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 


</head> 
<body class="w3-light-grey"> 
<div class="w3-twothird" ng-app="wapp" ng-controller="inst"> 
    <div class="w3-container w3-card-2 w3-white w3-margin-bottom"> 
     <div class="w3-row"> 
      <div class="w3-col w3-container m1 l1 w3-center"></div> 
      <div class="w3-col w3-container m10 l10 w3-wide"> 
<select ng-model="ngm" class="w3-select w3-border" name="something"><option value="" disabled selected>Choose something...</option> 
     <option onclick="enable()" value="APPLE">APPLE</option> 
     <option onclick="disable()" value="TOMATO">TOMATO</option> 
     <option onclick="enable()" value="PEACH">PEACH</option> 
     <option onclick="enable()" value="RICE">RICE</option> 
</select> 
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 
<select class="w3-select w3-border" name="other"><option value="" disabled selected>Choose other...</option> 
     <option value="JUICE">JUICE</option> 
     <option id="notshow" value="RED">RED</option> 
     <option value="TASTY">TASTY</option> 
     <option value="LONG">LONG</option> 
</select> 
      </div> 
      <div class="w3-col w3-container m1 l1 w3-center"></div> 
     <div> 

    <div> 
Some text something: <strong>{{ngm}}</strong> 
<div> 
<script> 
var app = angular.module('wapp', []); 
app.controller('inst', function($scope) { 
    $scope.ngm = "Choose first thing"; 
}); 
</script> 
</body> 
</html> 

和我的JS文件(jqw.js)是:

function disable() { 
    document.getElementById("notshow").disabled=true; 
} 
function enable() { 
    document.getElementById("notshow").disabled=false; 
} 
/* 

$(document).ready(function() { 
      $("option").filter(".last").click(function() { 
       //var content = $(this).html(); 
       $("#notshow").prop("disabled", true); 
      }); 
     }); 


*/ 

我曾尝试与jquery第一次,但没有机会使这个工作在移动浏览器。在桌面浏览器上工作正常,但我的问题是在移动。 因此,我需要一些帮助,以便在移动设备上查看此动作:当我在下一个选择TOMATO选项时选择选项RED将从选项列表中被禁用或从那里删除。没有jQuery代码工作到目前为止...

回答

0

我找到了答案。我修改代码,我使用PHP。所以现在工作正常!没有找到帮助