Jquery移动翻转开关从两个按钮中选择至少一个。

Question

我的html中有两个翻转按钮，如果用户的性别值为男性"off"，然后用户为女性"off“选择性别值，则男性按钮将自动切换到"on”，反之亦然。换句话说:如果一个翻转开关被取消选择，并且两个开关都被取消选择，我想要选择相反的按钮。

html：

<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >    
        <label for="flip-1">Men</label>
        <select name="flip-1" id="flip-1" data-role="slider"data-mini="true"onclick="toggleRule()>
            <option value="off"></option>
            <option selected="selected" value="on"></option>
        </select> 
    </div>

    <div data-role="fieldcontain" id="womenSelector" >  
        <label for="flip-2">Women</label>
        <select name="flip-2" id="flip-2" data-role="slider"data-mini="true"onclick="toggleRule()>
            <option value="off"></option>
            <option selected="selected" value="on"></option>                
        </select>           
    </div>

我没有工作的尝试：

 function toggleRule() {
// If the value is off, and female is off, then select automatically female on
if ($("flip-1").val()=="off" && $("flip-2").val()=="off"){ //condition one
    $("flip-2").val()=="on";
}
else if ($("flip-2").val()=="off" && $("flip-1").val()=="off"){ //contition 2
    $("flip-1").val()=="on";
}
};

Answer 1

将change事件附加到滑块flip-1和flip-2。当其中一个被更改时，读取它的值并相应地更新其他滑块。当以编程方式更新滑块值时，最重要的部分是刷新滑块.slider("refresh")。

$(document).on("pagecreate", "#pageID", function () {
    $("#flip-1, #flip-2").on("change", function () {
        if ($(this).val() == "on") {
            $("select")
                .not($(this))       /* select other slider */
                .val("off")         /* update its' value */
                .slider("refresh"); /* refresh it */
        }
        if ($(this).val() == "off") {
            $("select")
                .not($(this))
                .val("on")
                .slider("refresh");
        }
    });
});

演示

Answer 2

我从你的问题中推测，两者都可以启动，但两者都不能关闭。

在这种情况下，处理每个flipswitch上的更改事件。如果该值为off，则将另一个设置为on并刷新flipswitch小部件。

$(document).on("pagecreate", "#page1", function(){
    $("#flip-1").on("change", function(){
        if ($(this).val() == "off"){
             //turn on flip-2 
            $("#flip-2").val("on").slider( "refresh" );
        }
    });
    $("#flip-2").on("change", function(){
            if ($(this).val() == "off"){
             //turn on flip-1 
            $("#flip-1").val("on").slider( "refresh" );
        }
    });
});

这是一个演示

更新:使用Omar的技术，将相同的类分配给两个交换机(在我的示例中为genderSelect)：

<div data-role="fieldcontain" id="menSelector">
    <label for="flip-1">Men</label>
    <select id="flip-1" name="flip-1" data-role="slider" data-mini="true" class="genderSelect">
        <option value="off">Off</option>
        <option selected="" value="on">On</option>
    </select>
</div>
<div data-role="fieldcontain" id="womenSelector">
    <label for="flip-2">Women</label>
    <select name="flip-2" id="flip-2" data-role="slider" data-mini="true" class="genderSelect">
        <option value="off">Off</option>
        <option selected="" value="on">On</option>
    </select>
</div>

然后处理该类上的一个更改事件：

$(".genderSelect").on("change", function () {
    if ($(this).val() == "off") {
        $(".genderSelect").not($(this)).val("on").slider("refresh");
    }
});