以编程方式更改 Jquery Mobile FlipSwitch 选定值答案

【问题标题】：Changing Jquery Mobile FlipSwitch selected value Programmatically以编程方式更改 Jquery Mobile FlipSwitch 选定值
【发布时间】：2014-07-02 09:19:05
【问题描述】：

我正在尝试以编程方式更改翻转开关值，但它不起作用这是 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/

【问题讨论】：

What i need is that NG to be selected all the time but only if there is some text in both inputs ??
@Aravin ：当用户点击开关时，它会检查姓名和年龄输入字段，如果两个字段中都有一些值，然后将开关翻转到 OK，否则保持 NG
查看这个jsfiddle.net/7fCYA/3

标签： jquery jquery-mobile jquery-mobile-flipswitch

【解决方案1】：

尝试如下它会起作用。设置翻转开关的更改事件。

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

这里是 FIDDLE DEMO

【讨论】：

【解决方案2】：

我会反转逻辑，检查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");
    });    
});

【讨论】：

正是我需要的.. :-)