Question

我们知道，如果我们设置disabled =＆＃34;禁用＆＃34;对于广播，它的价值将在提交到后端时丢失。和收音机没有readonly属性。现在，我不想为已禁用的收音机添加隐藏，我只想使用js和css使其看起来像已禁用。

＆＃13;

<html>
<head>
<title>TEST</title>
<script>

</script>
<style>
#radio1 {
     /* how to make radio1 looks same as radio2*/
    pointer-events: none;
    opacity:0.5; 
}
</style>
</head>
<body>
<input type="radio" id="radio1" onclick="return false"/>
<input type="radio" id="radio2" disabled="disabled"/>
</body>
</html>

＆＃13;

Answer 1

您可以使用opacity

#radio1 {
    opacity:.5;
}

<input type="radio" id="radio1" onclick="return false" />
<input type="radio" id="radio2" disabled="disabled" />

或只是通过添加任何元素来创建自己的风格

label {
  display: inline-block;
  width: 25px;
  height: 25px;
  position: relative;
}
input[type="radio"] {
  position: absolute;
  visibility: hidden;
}
input[type="radio"] + label {
  border: 1px solid rgb(208, 208, 208);
  border-radius: 50%;
}
label:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  background: rgb(208, 208, 208);
  left: 0;
  top: 0;
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: 3px 0 0 3px;
}

<input type="radio" id="radio1" onclick="return false" />
<label for="radio1"></label>
<input type="radio" id="radio2" disabled="disabled" />
<label for="radio2"></label>

Answer 2

通常它仅适用于常见的CSS规则。所以：

input[type="radio"] {
    background-color: light-grey;
    border: 0 none;
}

不幸的是，Firefox不支持通过CSS进行任何颜色更改，所以我目前为止唯一的选择是使用背景图像（使用禁用单选按钮的图像）。 Reference

问候Mainz007

Answer 3

我相信您可以使用readonly模仿pointer-events: none属性，不适合您吗？

<input type="radio" id="radio1" onclick="return false" style="pointer-events: none;"/>

或者你可以在后端处理这种情况。如果无线电被禁用，那么我想你想使用某种默认值，只需在后端分配。

Answer 4

您可以使用此插件使其看起来像禁用。 http://widowmaker.kiev.ua/checkbox/

Answer 5

浏览器有不同的方式来显示表单控件，因此没有全面的解决方案来设置一个单选按钮的样式，就像一个禁用的单选按钮一样。

但是，您可以使用disabled="true"属性（以及class="disabled-overlay"到您希望在表单提交时提交的每个无线电的相邻无线电控制，并将要显示的无线电输入设为已禁用 class ＆＃34;禁用＆＃34;，使用以下CSS（请参阅this jsfiddle中的操作）

div.radio-container input.disabled-overlay {
    display: none;
}
div.radio-container input.disabled {
    display: none;
}

div.radio-container input.disabled + input.disabled-overlay {
    display: inline-block;
}

Answer 6

您可以将广播设置为已禁用，并在单击“提交”按钮时删除已禁用的广播将以下代码与jquery库一起使用

$("#sub").click(function(){
        $("input").removeAttr('disabled');
    });
<input type="submit" value="Save" id="sub" />

如何使收音机看起来像已禁用，但没有指定禁用=＆＃34;禁用＆＃34;，只使用css和js

6 个答案: