Сделать радио кнопки на фоне мощности изображения

Question

Я использую шаги jquery и icheck с бутстрапом. Проблема, с которой я столкнулась, связана с моими jquery-шагами, я не могу заставить переключатели icheck работать. На рисунке ниже, когда вы пытаетесь изменить переключатели в таблице, ничего не происходит. Но в нижней части изображения я использую тот же точный код, и когда вы наводите или выбираете переключатель, он работает идеально. Я думаю, что css для шагов jquery имеет какой-то код, который просто появляется, чтобы заставить переключатели выглядеть так, как будто они не выбраны. Есть ли способ убедиться, что моя радиокнопка принудительно установлена ​​поверх любого фонового изображения или используется! Важно, чтобы можно было правильно использовать функциональность?

$(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/

В моей скрипкой я не мог получить пример точно правильно, как я его на шахте. Но вы заметите, что переключатели все еще функционируют в нижней части скрипки, когда вы наводите курсор мыши или выбираете один из них, но не там, где я использую шаги jquery. Любая помощь с этим будет принята с благодарностью!

Answer 1

Я имел эту скрипку с Bootstrap, JQuery шагов и iCheck совместной работы 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> 

Конечно, мой пример это намного проще, чем ваша, но мы можем сказать, что это не ошибка или проблема несовместимости как вы думаете, что это возможно.

Кроме того, я понимаю, что ваш код имеет много ошибок разметки. Я уверен, что если вы переписываете свой код, делая его шаг за шагом и уделяя немного больше внимания, вы сможете достичь ожидаемого результата.

Answer 2

После потянув меня за волосы совсем немного на этой неделе, наконец, нашел его:

https://jsfiddle.net/xx9jr1z3/ показывает проблему.

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

перед тем $(...).steps(...) вызывает входы iCheck не быть интерактивными. Реверсирование их (steps до iCheck) исправляет его.