如何使收音机看起来像禁用但不指定disabled=“disabled”，只需使用css和js

How to make a radio looks like disabled but don't specify disabled="disabled", just using css and js

本文关键字：disabled js css 看起来 收音机 何使      更新时间：2023-09-26

我们知道，如果我们将disabled="disabled"设置为无线电，则在提交到后端时，其值将在表单中丢失。 并且无线电没有只读属性。现在，我不想为禁用的无线电添加隐藏，我只想使用 js 和 CSS 使其看起来像禁用。

<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>

您可以使用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>

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

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

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

通常它只通过常见的CSS规则工作。所以：

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

不幸的是，Firefox 不支持通过 CSS 进行任何颜色更改，因此到目前为止我知道您唯一的选择是使用背景图像（使用禁用单选按钮的图像）。参考

问候美因茨007

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

浏览器具有不同的显示表单控件的方式，因此没有包罗万象的解决方案来设置单选按钮的样式，使其看起来与禁用的单选按钮完全相同。

但是，您可以使用具有 disabled="true" 属性的相邻无线电控件（并class="disabled-overlay"到您希望在表单提交时提交的每个无线电，并使用以下 CSS 为您想要显示为禁用的无线电输入提供类"禁用"（请参阅此 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;
}

您可以将收音机设置为禁用，单击提交按钮时删除禁用的将以下代码与 jquery 库结合使用

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