2016-08-06 10 views
1

Ich benutze das iCheck-Plugin, um meine Checkboxen zu verschönern. Wenn ich jedoch alle ausgefüllten Daten aus dem Formular mit jQuery serialize zusammentrage, werden die aktivierten Kontrollkästchen nicht angezeigt oder per Post übermittelt.iCheck und jQuery serialisieren

Ich denke, wenn ein Benutzer auf das Kontrollkästchen iCheck klickt, um überprüft zu werden, wird der Status des Kontrollkästchens Eingabeart nicht tatsächlich auf den aktivierten Zustand gesetzt.

Wie geht das? Mit normalen HTML-Checkboxen werden durch Serialisierung gut aufgenommen.

Relevante Teil des Formulars:

<div class="form-group"> 
<label class=""> 
<input type="checkbox" class="minimal" id="remote" name="remote" value="1"> 
</label>       
</div> 

Script:

//iCheck for checkbox and radio inputs 
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({ 
checkboxClass: 'icheckbox_minimal-blue', 
radioClass: 'iradio_minimal-blue', 
checkedClass: 'checked', 
}); 

Einreichen Funktion:

$.ajax({ 
    type: "POST", 
    url: '/taken/action.php', 
    data: $form.serialize(), 
    dataType: "json", 
    ............ 

Antwort

0

Es scheint mir, dass iCheck das Kontrollkästchen in einem div hüllt wie dies:

<div class="icheckbox_minimal" aria-checked="true" aria-disabled="false"> 
    <input tabindex="5" type="checkbox" id="minimal-checkbox-1" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"> 
    <ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins> 
</div> 

Wenn Sie das Häkchen setzen, wird die markierte Klasse, in diesem Fall 'markiert', zum div hinzugefügt.

Was ich tun würde, ist einfach versteckt Eingänge haben, dass Sie den Wert ändern, wenn Sie auf dem div klicken:

$(".icheckbox_minimal").click(function(){ 
    // You might want more logic in here since You probably have more then 
    // One check box to toggle. 
    var val = $("#myHiddenIpnut").val(); 
    $("#myHiddenIpnut").val(val === "true" ? "false" : "true"); 
}); 

Jetzt wird jQuery diese Eingänge greifen :)

+1

Danke, das mich setzen in der richtige Weg. Hat ein verstecktes Feld erstellt und die Callback-Funktion von iCheck verwendet, um es zu ändern. $ ('# onsitecheckbox') auf ('ifChecked', function (event) { \t \t \t \t \t \t alert (event.type + 'Rückruf.'); \t \t \t \t \t \t $ ("# Ort "). val ('vor Ort'); \t \t \t \t \t \t}); \t \t \t \t \t \t \t \t \t \t \t \t $ ('# onsitecheckbox'). Auf ('ifUnchecked', function (event) { \t \t \t \t \t \t alert (event.type + 'Rückruf') ; \t \t \t \t \t \t $ ("# location") val ('remote');. \t \t \t \t \t \t}); – Mbrouwer88

+0

@ Mbrouwer88 Gut zu wissen :) – Alex

Verwandte Themen