在电源背景图像上制作单选按钮

Question

我正在使用jquery步骤和icheck with bootstrap。我遇到的问题是我的jquery步骤我无法使icheck单选按钮工作。在下图中，当您尝试更改表中的单选按钮时，没有任何反应。但在图片的底部我使用相同的确切代码，当你悬停或选择一个单选按钮时，它是完美的。我认为jquery步骤的css有一些代码，只是看起来让单选按钮看起来没有被选中。有没有办法确保我的单选按钮被强制放在任何背景图像之上或使用！important以便可以正确使用功能？

＆＃13;

＆＃13;

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

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

在我的小提琴中，我无法得到完全正确的例子。但是你会注意到，当你将鼠标悬停在其中一个而不是我使用jquery步骤时，单选按钮仍然可以在小提琴的底部使用。任何有关这方面的帮助将不胜感激！

Answer 1

我使用Bootstrap，jQuery Steps和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）会纠正它。