Make radio buttons over power background image

Question

I am using jquery steps and icheck with bootstrap. The problem I am having is with my jquery steps I can not get the icheck radio buttons to work. In the picture below when you try to change the radio buttons in the table nothing happens. But on the bottom of the picture I am using the same exact code and when you hover or select a radio button it is working perfect. I am thinking the css for the jquery steps has some sort of code that just appearing to make the radio buttons just look like there not selected. Is there a way to make sure my radio button are forced on top of any background image or use !important so that there functionality can be used correctly?

$(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 my fiddle I could not get the example exactly correct how I have it on mine. But you will notice that the radio buttons are still functionable on the bottom of the fiddle when you hover over or select one of them but not where I am using jquery steps. Any help with this would be greatly appreciated!

Answer 1

I had this fiddle with Bootstrap, jQuery Steps and iCheck working together 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>

Of course my example it's a lot simple than yours, but we can say it is not a bug or an incompatibility problem like you're thinking this could be.

Besides, i realize that your code has a lot of markup errors. I'm sure if you rewrite your code, doing it step by step, and paying a little more attention you will be able to accomplish the expected result.

Answer 2

After pulling my hair out quite a bit this week, finally found it:

https://jsfiddle.net/xx9jr1z3/ shows the issue.

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

before $(...).steps(...) causes the iCheck inputs to not be clickable. Reversing them (steps before iCheck) corrects it.