JQuery Flip toggle refresh without action

Question

I have a page with 3 switch toggle buttons, the first two buttons activate a action (lamp 1 on and off, lamp 2 on and off), the third button is to switch both lamps on or out. So if I turn on button 1 and 2, the third button should be refreshed and also show the value on. Now I only switched the first button and turn lamp 1 off, the third button should be refreshed and show the value off cause not all Lamps are on. The refresh works fine, but when its refreshed the third button, it also starts the function for turning off both lamps, lamp 1 and two are off (only lamp 1 should be off). I searching for a way to refresh the button without starting the event which I start when I click the button. Heres my Javascript code for the logic of the switch toggle buttons:

$( "#flip1").change(function(){
  var value1 = $("#flip1").val();
  var value2 = $("#flip2").val();

  if (value1 == 1) {
      switchlight(1, "on"); // function for switching the lamp
      if (value2 == 1){
          $("#flip3").val("1").flipswitch("refresh"); // should be refreshed without action
      }
  }else{
      switchlight(1, "off");
      $("#flip3").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

$( "#flip2").change(function(){
  var value1 = $("#flip1").val();
  var value2 = $("#flip2").val();

  if (value2 == 1) {
      switchlight(2, "on"); // function for switching the lamp
      if (value1 == 1){
          $("#flip3").val("1").flipswitch("refresh"); // should be refreshed without action
      }
  }else{
      switchlight(2, "off");
      $("#flip3").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

$( "#flip3").change(function(){
  var value3 = $("#flip3").val();
  if (value3 == 1) {
    switchlight(1, "on");
    switchlight(2, "on");

    $("#flip1").val("1").flipswitch("refresh"); // should be refreshed without action
    $("#flip2").val("1").flipswitch("refresh"); // should be refreshed without action
  }else{
    switchlight(1, "off");
    switchlight(2, "off");

    $("#flip1").val("0").flipswitch("refresh"); // should be refreshed without action                 
    $("#flip2").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

Thanks for your help

Answer 1

UPDATE: I digged around a bit and found a better way:

$( "#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").off('change').val("0").flipswitch("refresh").on('change', flip3change);
    };
});

$( "#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").off('change').val("0").flipswitch("refresh").on('change', flip3change);
    };
});

function flip3change() {
     var value3 = $("#flip3").val();
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        $("#flip1").val("0").flipswitch("refresh");
        $("#flip2").val("0").flipswitch("refresh");
    };
}

$( "#flip3").change(flip3change);

OLD ANSWER:

You just have to add some code to re-enable the switches inside the #flip1 and #flip2 change handlers:

$( "#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").val(value2).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");
        $("#flip1").val(value1).flipswitch("refresh");
    };
});

$( "#flip3").change(function(){
    var value3 = $("#flip3").val();
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        $("#flip1").val("0").flipswitch("refresh");
        $("#flip2").val("0").flipswitch("refresh");
    };
});

Online Demo