JSFiddle - React, Tailwind, and code Playground

by Annie Lagang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<fieldset xmlns:fb="https://www.facebook.com/2008/fbml"><span style="font-weight: normal; font-size: 1.5em;">Tick the checkbox of the guest/s you want to split from this booking. At least one guest should be retained on this booking in order to proceed.</span><br><br><br><div class="row no-label"><input id="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger0_ADT" type="checkbox" name="ControlGroupDividePnrPassengerView$ControlsDividePnrPassengerView$CheckBoxPassenger0_ADT" value="0_ADT"><span style="font-size: 1.5em; padding-left:10px;"><label for="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger0_ADT">test, adt  </label></span></div>
          <div class="row no-label"><input id="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger1_ADT" type="checkbox" name="ControlGroupDividePnrPassengerView$ControlsDividePnrPassengerView$CheckBoxPassenger1_ADT" value="1_ADT"><span style="font-size: 1.5em; padding-left:10px;"><label for="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger1_ADT">test, adult  </label></span></div>
          <div class="row no-label"><input id="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger2_CHD" type="checkbox" name="ControlGroupDividePnrPassengerView$ControlsDividePnrPassengerView$CheckBoxPassenger2_CHD" value="2_CHD"><span style="font-size: 1.5em; padding-left:10px;"><label for="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger2_CHD">test, chd  </label></span></div>
          <div class="row no-label"><input id="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger3_CHD" type="checkbox" name="ControlGroupDividePnrPassengerView$ControlsDividePnrPassengerView$CheckBoxPassenger3_CHD" value="3_CHD"><span...

JavaScript

$('#dividePnrSubmit').click(function() {
    //$('#dialogDivideConfirm').dialog('open');
    //$("#dialogDivideError").dialog('open');
    validatePassengers();
});

$("#dialogDivideConfirm").dialog({
   autoOpen: false,   
   buttons: {
            	"OK": function () {
               $(this).dialog("close");
               callback(true);
            },
            	"Cancel": function () {
              $(this).dialog("close");
              callback(false);
            }
    },
    closeOnEscape: false,
    dialogClass: "no-close", //css class name(s) for dialog, as for this case the no-close class is defined as hidden in main.css
    draggable : false,
    modal: true,
    position: {
    						my: "center top",
                at: "center bottom",
                of: '.header'
    },
    resizable: false
});

$("#dialogDivideError").dialog({
   autoOpen: false,   
   buttons: {
            	"OK": function () {
               $(this).dialog("close");
            }
    },
    closeOnEscape: false,
    dialogClass: "no-close", //css class name(s) for dialog, as for this case the no-close class is defined as hidden in main.css
    draggable : false,
    modal: true,
    position: {
    						my: "center top",
                at: "center bottom",
                of: '.header'
    },
    resizable: false
});

// add hidden textbox containing the "boo" or "yah".
function callback(value) {
    if (value) {
        alert("Confirmed");
    } else {
        alert("Rejected");
    }
}

function validatePassengers() {
    $("input:checkbox:not(:checked)").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
    });
}