Программное изменение выбранного значения 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/.


person Addy    schedule 02.07.2014    source источник
comment
@Aravin: когда пользователь нажимает на переключатель, он проверяет поля ввода имени и возраста, если в обоих полях есть какое-то значение, затем переключает флипы на OK, в противном случае остается на NG   -  person Addy    schedule 02.07.2014
comment
проверьте этот jsfiddle.net/7fCYA/3   -  person Aravin    schedule 02.07.2014


Ответы (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" />

Джаваскрипт такой:

$("#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");
}
});

Вот ДЕМО FIDDLE

person Aravin    schedule 02.07.2014

Я бы изменил логику, проверив поля 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");
    });    
});
person Sga    schedule 02.07.2014
comment
Именно то, что мне нужно.. :-) - person Addy; 02.07.2014