如何使一个广播看起来是禁用的，但不指定禁用=“禁用”，只使用css和js

as we know, if we set disabled="disabled" to the radio, its value will lost in the form when submitting to backend. and radio doesn't have readonly attribute. now, i don't want to add a hidden for the disabled radio, i just want to use js and css to make it looks like disabled.

如我们所知，如果我们将disabled="disabled"设置为广播，它的值将在提交后端时在表单中丢失。而收音机没有readonly属性。现在，我不想为禁用的广播添加隐藏，我只想使用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>

6 个解决方案

#1

I believe you can mimic the readonly attribute with pointer-events: none, wouldn't it suit you?

我相信您可以使用指针事件来模拟readonly属性:none，它不适合您吗?

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

Or you could handle this situation in backend. If the radio is disabled-like then I guess you want to use some kind of default value, just assign it in backend.

或者你可以在后台处理这种情况。如果收音机是去功能化的，那么我猜你想要使用某种默认值，只需要在后端分配它。

#2

you can use opacity

您可以使用不透明度

#radio1 {
    opacity:.5;
}

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

or just create your own style by adding any element

或者只是通过添加任何元素来创建自己的样式

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>

#3

Normally it works just by the common CSS-rules. So:

通常情况下，它只根据常见的css规则工作。所以:

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

Unfortunatly Firefox doesn't support any color changes via CSS, so your only option, that I know so far, is using background-image (using an image of an disabled radio button). Reference

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

Greetings Mainz007

问候Mainz007

#4

You can make it look like disabled using this plugin. http://widowmaker.kiev.ua/checkbox/

你可以让它看起来像禁用了这个插件。http://widowmaker.kiev.ua/checkbox/

#5

Browsers have different ways of displaying form controls, so there will be no catch-all solution to style a radio button to appear exactly like a disabled radio button.

浏览器有不同的显示表单控件的方式，所以没有一种统一的方法来设计一个单选按钮，让它看起来就像一个禁用的单选按钮。

However, you could an adjacent radio control with the disabled="true" attribute (and class="disabled-overlay" to each radio you want submitted on form submission, and give the radio inputs that you want to appear disabled the class "disabled", with the following CSS (see it in action in this jsfiddle)

但是，您可以使用禁用的="true"属性(和class="disabled-overlay"给每个在表单提交时要提交的广播控件，并给你想要显示的无线电输入禁用类"disabled"，使用以下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;
}

#6

you can set radio to disabled and when click the submit button remove the disabled using the following code with the jquery library

您可以将单选设置为禁用，当单击submit按钮时，使用jquery库中的以下代码删除禁用的

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

#1