JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Lamp 1</h2>
<span class="ui-li-aside">
<select id="flip1" data-role="flipswitch">
<option value="0">aus</option>
<option value="1">an</option>
</select>
</span>
<h2>Lamp 2</h2>
<span class="ui-li-aside">
<select id="flip2" data-role="flipswitch">
<option value="0">aus</option>
<option value="1">an</option>
</select>
</span>
<h2>Both</h2>
<span class="ui-li-aside">
<select id="flip3" data-role="flipswitch">
<option value="0">aus</option>
<option value="1">an</option>
</select>
</span>
JavaScript
$( "#flip1").change(function(){
var value1 = $("#flip1").val();
var value2 = $("#flip2").val();
if (value1 == 1) {
if (value2 == 1){
$("#flip3").val("1").flipswitch("refresh");
}
}else{
// should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
$("#flip3").val("0").flipswitch("refresh");
};
});
$( "#flip2").change(function(){
var value1 = $("#flip1").val();
var value2 = $("#flip2").val();
if (value2 == 1) {
if (value1 == 1){
$("#flip3").val("1").flipswitch("refresh");
}
}else{
// should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
$("#flip3").val("0").flipswitch("refresh");
};
});
$( "#flip3").change(function(){
var value3 = $("#flip3").val();
var value1 = $("#flip1").val();
var value2 = $("#flip2").val();
console.log(value1);
if (value3 == 1) {
$("#flip1").val("1").flipswitch("refresh");
$("#flip2").val("1").flipswitch("refresh");
}else{
if(value1 === 1){
$("#flip2").val("0").flipswitch("refresh");
}
else if(value2 === 1){
$("#flip1").val("0").flipswitch("refresh");
}
else if(value2 === "1" && value1 === "1"){
$("#flip1").val("0").flipswitch("refresh");
$("#flip2").val("0").flipswitch("refresh");
}
};
});