Question

我有以下代码：

    <!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代码工作......

Answer 1

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

Javascript代码不会在桌面上禁用移动设备上的元素

1 个答案: