Изменение выбранного значения Jquery Mobile FlipSwitch программно
Я пытаюсь изменить значение флип-переключатель программно, но это не работает здесь HTML
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="NG">NG</option>
<option value="OK">OK</option>
</select>
<input type="text" id="name" />
<input type="number" id="age" />
Вот сценарий
$("#flip-1").on('slidestart', function (event) {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if (name == "" || age == "") {
$("#flip-1").val("NG").flipswitch("refresh");
} else[
// slide it to OK
]
});
Что мне нужно, так это NG
быть выбранным все время, но только если в обоих входах есть текст
Вот скрипка http://jsfiddle.net/r9X5U/6/
2 ответа
Решение
Попробуйте как это будет работать. Установите событие изменения для переключателя.
HTML это как
<select name="flip-3" id="snd-switch" data-role="flipswitch" data-mini="true">
<option value="NG">NG</option>
<option value="OK">OK</option>
</select>
<input type="text" id="name" />
<input type="text" id="age" />
Javascript похож на:
$("#snd-switch").on('change', function (event) {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
if(name == "" || age == ""){
// alert("hi");
$("#snd-switch").val("NG").flipswitch("refresh");
}else{
$("#snd-switch").val("OK").flipswitch("refresh");
}
});
Вот ДЕМО ДЕЛА
Я бы изменил логику, проверив input
поля и включение переключателя при необходимости. HTML:
<div data-role="page" id="page">
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch">
<option value="NG">NG</option>
<option value="OK">OK</option>
</select>
<input type="text" id="name" />
<input type="number" id="age" />
</div>
JavaScript:
$("#page").bind("pageshow", function()
{
$("#flip-1").flipswitch("disable");
$("#name,#age").on("keyup", function(event, ui)
{
if ($("#name").val().length !== 0 && $("#age").val().length !== 0)
$("#flip-1").flipswitch("enable");
else
$("#flip-1").flipswitch("disable");
});
});