jeudi 24 mars 2016

display message when 2 bootstraptoggle checkboxes are selected

I am trying to get a message to pop up when a user selects 2 bootstrap toggle checkboxes. I have this set up so far:

My html:

<div>
  <p id="enable-msg"><span class="glyphicon glyphicon-thumbs-up"></span></p>
  <p id="disable-msg"><span class="glyphicon glyphicon-thumbs-down"></span></p>

  &nbsp;&nbsp;
  <label for="cure">
  <input type="checkbox" id="Checkbox1" onclick="showHide();" onchange="ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')" >
  Criteria 1</label>
</div>

<div>
  <p id="enable-msg2"><span class="glyphicon glyphicon-thumbs-up"></span></p>
  <p id="disable-msg2"><span class="glyphicon glyphicon-thumbs-down"></span></p>

  &nbsp;&nbsp;
  <input type="checkbox" id="Checkbox2" onchange="ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')" unchecked/>

  <label for="shortTerm" class="control-label">Criteria 2</label>
  <br>
  <label class="curemsg green" id="Text1">&nbsp;Message&nbsp;</label>
</div>

My javascipt:

$('input[type="checkbox"]').click(function () {
    $('.curemsg').hide();
    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) $('.curemsg').show();
});

$(document).ready(function() {
  $("input#Checkbox1").bootstrapSwitch({});
  ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')
});

$(document).ready(function() {
  $("input#Checkbox2").bootstrapSwitch({});
  ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')
});

function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
  var check_box = document.getElementById(checkId)
  var first_alert = document.getElementById(firstCommentId);
  var second_alert = document.getElementById(secondCommentId);

  if (check_box.checked == true) {
    first_alert.style.visibility = "visible";
    first_alert.style.display = "inline-block";
    second_alert.style.visibility = "hidden";
    second_alert.style.display = "none";
  } else {
    first_alert.style.visibility = "hidden";
    first_alert.style.display = "none";
    second_alert.style.visibility = "visible";
    second_alert.style.display = "inline-block";
  }
}

My CSS:

#enable-msg,
#enable-msg2 {
  display: inline;
  color: green;
}

#disable-msg,
#disable-msg2 {
  display: inline;
  color: red;
}

.curemsg {
  display: none;
}

.green {
    background: #00ff00;
}

Here is my Jsfiddle

Ultimately I will have about 10 toggleswitches but I want to be able to display a message when 2 specific toggleswitches/checkboxes have been selected.

Thank you




Aucun commentaire:

Enregistrer un commentaire