Machen Radio-Buttons über Power-Hintergrundbild

Question

Ich benutze jquery Schritte und icheck mit Bootstrap. Das Problem, das ich habe, ist mit meinen jQuery-Schritten Ich kann die icheck Radioknöpfe nicht zum Funktionieren bringen. Wenn Sie versuchen, die Radioknöpfe in der Tabelle zu ändern, passiert auf dem Bild nichts. Aber am unteren Rand des Bildes verwende ich den gleichen genauen Code und wenn Sie den Mauszeiger bewegen oder ein Optionsfeld auswählen, funktioniert es perfekt. Ich denke, das CSS für die JQuery-Schritte hat eine Art von Code, der nur so erscheint, dass die Optionsfelder nur so aussehen, als wären sie nicht ausgewählt. Gibt es eine Möglichkeit, sicherzustellen, dass mein Optionsfeld auf ein beliebiges Hintergrundbild gezwungen wird oder wichtig ist, damit die Funktionalität korrekt verwendet werden kann?

$(document).ready(function() { 
 
    $('.i-checks').iCheck({ 
 
    checkboxClass: 'icheckbox_square-green', 
 
    radioClass: 'iradio_square-green', 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script> 
 

 

 
<div class="i-checks"> 
 
    <label> 
 
    <input type="radio" value="option1" name="a"> <i></i> Option one</label> 
 
</div> 
 
<div class="i-checks"> 
 
    <label> 
 
    <input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked</label> 
 
</div> 
 
<div class="i-checks"> 
 
    <label> 
 
    <input type="radio" name="a" value="option2"> <i></i> Option three checked and disabled</label> 
 
</div> 
 
<div class="i-checks"> 
 
    <label> 
 
    <input type="radio" name="a"> <i></i> Option four disabled</label> 
 
</div> 
 

 
js

https://jsfiddle.net/yf1q3scc/5/

In meiner Geige konnte ich das Beispiel genau nicht bekommen richtig, wie ich es auf mir haben. Aber Sie werden bemerken, dass die Radiobuttons immer noch auf der Unterseite der Geige funktionieren, wenn Sie den Mauszeiger darüber bewegen oder eine davon auswählen, aber nicht dort, wo ich jquery-Schritte verwende. Jede Hilfe mit diesem würde sehr geschätzt werden!

Answer 1

hatte ich diese Geige mit Bootstrap, jQuery Stufen und iCheck zusammen https://jsfiddle.net/rpw2Lx41/

<div id="example-basic"> 
    <h3>Step 1</h3> 
    <section> 
     <input type="checkbox"> 
     <input type="checkbox" checked> 
     <input type="radio" name="iCheck"> 
     <input type="radio" name="iCheck" checked> 
    </section> 
    <h3>Step 2</h3> 
    <section> 
     <p>Simple text.</p> 
    </section> 
</div> 

Natürlich arbeiten mein Beispiel es als Ihr viel einfacher ist, aber wir können sagen, dass es nicht um einen Fehler oder eine Inkompatibilität Problem ist, wie Du denkst, das könnte sein.

Außerdem merke ich, dass Ihr Code eine Menge Markup-Fehler hat. Ich bin mir sicher, wenn Sie Ihren Code neu schreiben, Schritt für Schritt, und ein wenig mehr Aufmerksamkeit schenken, werden Sie in der Lage sein, das erwartete Ergebnis zu erreichen.

Answer 2

Nach mir die Haare aus ziemlich viel in dieser Woche ziehen, fand sie schließlich:

https://jsfiddle.net/xx9jr1z3/ das Problem zeigt.

$('input').iCheck({ 
    //settings 
}); 

vor $(...).steps(...) bewirkt, dass die Eingänge iCheck nicht angeklickt werden. Durch das Umkehren (steps vor iCheck) wird es korrigiert.