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

Question

我正在使用 jquery 个步骤并使用 bootstrap 检查。我遇到的问题是我的 jquery 步骤无法使 icheck 单选按钮工作。在下图中，当您尝试更改 table 中的单选按钮时，没有任何反应。但在图片的底部，我使用的是完全相同的代码，当你悬停或 select 一个单选按钮时，它工作完美。我在想 jquery 步骤的 css 有某种代码，只是让单选按钮看起来就像没有 selected 一样。有没有办法确保我的单选按钮强制位于任何背景图像之上或使用 !important 以便可以正确使用这些功能？

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

在我的 fiddle 中，我无法得到完全正确的例子。但是您会注意到，当您将鼠标悬停在 fiddle 或 select 其中一个按钮上时，单选按钮仍然可以在 fiddle 底部使用，但在我使用 jquery 步骤的地方不起作用。如有任何帮助，我们将不胜感激！

Answer 1

我有这个 fiddle 与 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 之前）更正它。

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

Make radio buttons over power background image

css

twitter-bootstrap

icheck

jquery-steps