-1
Ich habe den folgenden Code:Javascript-Code keine Elemente auf mobilen deaktivieren wie auf Desktop-
<!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> </p><p> </p><p> </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>
und meine JS-Datei (jqw.js) ist, dass:
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);
});
});
*/
ich versucht habe, mit jQuery zum ersten Mal, aber keine Chance, dies auf mobilen Browsern zu arbeiten. Auf dem Desktop-Browser funktioniert es gut, aber mein Problem ist auf dem Handy. Also, ich brauche Hilfe, um auf dem mobilen Gerät auch diese Aktion zu sehen: wenn ich die Option TOMATO im nächsten wähle, wähle die Option ROT wird deaktiviert oder gelöscht von dort aus der Optionsliste gefunden. Kein jQuery-Code hat bisher funktioniert ...