如何关闭单选按钮功能

Question

我想使用单选按钮作为设计元素，没有任何功能。用户不能勾选或取消勾选。

<div id="divRadios">
<input type="radio">
<input type="radio">  
...
</div>

我想解决方案可能是在#divRadios上放置一个单独的空div，并给它更高的z-index，但也许有一个更原生的方式?

Answer 1

如果你不想让用户检查就不要使用<input type = 'radio' />

创建span或div并添加radio类:

 .radio{
     -moz-appearance:radio;
     -webkit-appearance:radio; 
    }

Answer 2

禁用它们:

<input type="radio" disabled>

Answer 3

另一种禁用无线电而不丢失其实际样式的方法(不带'disabled'标签)

    <input type="radio" id="rd1" name="radio">
    <input type="radio" id="rd2" name="radio" style="display: none;">
    <script>
    $( '#rd1' ).click( function(e) { 
        $('#rd2').click();
    });
    </script>

Answer 4

您可能需要在单选输入元素上使用'disabled'属性:

<div id="divRadios">
<input type="radio" disabled>
<input type="radio" disabled>  
...
</div>

Answer 5

作为@user2404546答案的扩展，最好的解决方案似乎只是使用常规复选框，但改变其外观:

.radio{
     -moz-appearance:radio;
     -webkit-appearance:radio; 
}
<input class="radio" type="checkbox">