Bootstrap 4 Toggle Button

Question

Ich baue ein einfaches Fahrzeug Inspektionsformular und ich möchte Checkboxen als Tasten verwenden, um true/ Werte zu erfassen.

Dies soll mit Bootstrap 4 trivial sein.

Ich möchte jedoch das Standardverhalten der Tasten anpassen; , um zwischen den Klassen success und danger umzuschalten, um true/ zu bezeichnen. Und auch in einigen Fällen, um den Text der Schaltfläche zu ändern, z. "Lecks" -> "Keine Lecks".

1. Ich habe die Toggle Arbeit mit Hilfe von @Yass bekam, aber ich bin nicht die richtigen true/false Werte bekommen, wenn ich das Formular abzuschicken. Auch wenn die Kontrollkästchen aktiviert sind (true), werden die Werte so durchlaufen, als wären sie false.

2. Ich bin nicht sicher, wie die Textänderung beim Umschalten zwischen den beiden Zuständen zu behandeln ist. Buttons

Kästchen zum Ankreuzen

HTML

<div class="row"> 
    <div class="col-sm-4 col-xs-12"> 
     <p class="font-weight-bold">Bonnet</p> 
     <div data-toggle="buttons"> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="oil" checked="checked" autocomplete="off"> Oil 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="coolant" checked="checked" autocomplete="off"> Coolant 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="breakfluid" checked="checked" autocomplete="off"> Break Fluid 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="screenwash" checked="checked" autocomplete="off"> Screen Wash 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="noleaks" checked="checked" autocomplete="off"> No Leaks 
      </label> 
     </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
     <p class="font-weight-bold">Outside</p> 
     <div data-toggle="buttons"> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="tyres" checked="checked" autocomplete="off"> 
       Tyres 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="wiperblades" checked="checked" autocomplete="off"> 
       Wiper Blades 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="lights" checked="checked" autocomplete="off"> 
       Lights 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="indicators" checked="checked" autocomplete="off"> 
       Indicators 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="outcleanliness" checked="checked" autocomplete="off"> 
       Cleanliness 
      </label> 
     </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
     <p class="font-weight-bold">Inside</p> 
     <div data-toggle="buttons"> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="horn" checked="checked" autocomplete="off"> 
       Horn 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="breaks" checked="checked" autocomplete="off"> 
       Breaks/Handbrake 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="seatbelt" checked="checked" autocomplete="off"> 
       Seatbelt 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="windscreen" checked="checked" autocomplete="off"> 
       Windscreen 
      </label> 
      <label class="btn btn-block btn-success"> 
       <input type="checkbox" name="incleanliness" checked="checked" autocomplete="off"> 
       Cleanliness 
      </label> 
     </div> 
    </div> 
</div> 

JavaScript

$('label.btn').on('click', function() { 
    //Find the child check box. 
    var $input = $(this).find('input'); 

    $(this).toggleClass('btn-danger btn-success'); 
    //Remove the attribute if the button is "disabled" 
    if ($(this).hasClass('btn-danger')) { 
     $input.removeAttr('checked'); 
    } else { 
     $input.attr('checked', ''); 
    } 

    return false; //Click event is triggered twice and this prevents re-toggling of classes 
}); 

https://jsfiddle.net/mstnorris/9fyzfu8w/

Answer 1

Gehen Sie mit dem Click-Ereignisse von den Tasten, und drücken Sie den geprüften Wert des Eingangs jQuery .prop() wie dies mit ..

var $chk = $(this).find('[type=checkbox]'); 
$chk.prop('checked',!$chk.prop('checked')); 

Demo: http://codeply.com/go/IeuO1fPf7H

Answer 2

Hier ist ein alternative Lösung mit reinem Javascript. Fügen Sie jeder Schaltfläche eine ausgeblendete Eingabe hinzu und aktualisieren Sie bei jedem Klicken auf die Schaltfläche die ausgeblendeten Werte.

HTML:

<!-- Visible button --> 
<input onclick="toogleButton(this,'hiddenButton')" class="btn btn-secondary" type="button" value="Toogle"> 
<!-- Hidden input --> 
<input name="FM_city" id="hiddenButton" type="hidden" value="0"></input> 

Javascript:

// Called when the button is clicked 
function toogleButton(callingElement,hiddenElement) 
{ 
    // Check the color of the button 
    if (callingElement.classList.contains('btn-secondary')) 
    { 
     // If the button is 'unset'; change color and update hidden element to 1 
     callingElement.classList.remove('btn-secondary'); 
     callingElement.classList.add('btn-success'); 
     document.getElementById(hiddenElement).value="1"; 
    } 
    else 
    { 
     // If the button is 'set'; change color and update hidden element to 0 
     callingElement.classList.remove('btn-success'); 
     callingElement.classList.add('btn-secondary'); 
     document.getElementById(hiddenElement).value="0"; 
    } 
} 

Wenn das Formular abgeschickt wird, Prozesswert des verborgenen Eingang. Beachten Sie, dass Sie den Text der Schaltfläche problemlos ändern können mit: Letzte Bemerkung: Anfangswert der ausgeblendeten Elemente muss in Übereinstimmung mit der Ausgangsfarbe der zugeordneten Schaltfläche sein.