blocks|key|1489112|text|您可以使用此插件使其看起来像禁用的。http://widowmaker.kiev.ua/checkbox/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1489113|entityMap|0|LINK|mutability|MUTABLE|url|http://widowmaker.kiev.ua/checkbox/^0|I|Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can make it look like disabled using this plugin. <a href="http://widowmaker.kiev.ua/checkbox/" rel="nofollow">http://widowmaker.kiev.ua/checkbox/</a></p>


blocks|key|1204381|text|通常情况下，它只是按照共同的CSS-规则工作。所以：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1204382|input[type="radio"]+{
++++background-color:+light-grey;
++++border:+0+none;
}|code-block|syntax|javascript|1204383|不幸的是，火狐不支持通过CSS改变任何颜色，所以你的唯一选择，我知道到目前为止，是使用背景图像(使用一个禁用的单选按钮的图像)。参考文献|offset|length|1204384|问候Mainz007|1204385|entityMap|0|LINK|mutability|MUTABLE|url|http://www.css4you.de/wsradio/^0|0|0|1S|4|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Normally it works just by the common CSS-rules. So:</p>

<pre><code>input[type="radio"] {
    background-color: light-grey;
    border: 0 none;
}
</code></pre>

<p>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). <a href="http://www.css4you.de/wsradio/" rel="nofollow">Reference</a></p>

<p>Greetings Mainz007</p>


blocks|key|2727592|text|我相信您可以用readonly模拟pointer-events:+none属性，对吗？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2727593|<input+type="radio"+id="radio1"+onclick="return+false"+style="pointer-events:+none;"/>|code-block|syntax|javascript|2727594|或者你可以在后台处理这种情况。如果无线电被禁用--就像我想要使用某种默认值一样，只需在后端分配它。|2727595|entityMap^0|7|8|H|K|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

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

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

<p>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.</p>


blocks|key|1489230|text|浏览器有不同的显示窗体控件的方式，因此不会有完全的解决方案来设置单选按钮的样式，使其与禁用的单选按钮完全相同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489231|但是，您可以使用disabled="true"属性与相邻的无线电控件(以及在表单提交时要提交的每个收音机的class="disabled-overlay"+)，并使用以下CSS提供要显示为禁用类的无线电输入(参见这弹琴中的操作)。|offset|length|style|CODE|1489232|div.radio-container+input.disabled-overlay+{
++++display:+none;
}
div.radio-container+input.disabled+{
++++display:+none;
}

div.radio-container+input.disabled+%2B+input.disabled-overlay+{
++++display:+inline-block;
}|code-block|syntax|javascript|1489233|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yz13LL69/2/^0|0|8|F|1H|O|2Y|3|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@$D|10|E|11|1|12]]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>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.</p>

<p>However, you could an adjacent radio control with the <code>disabled="true"</code> attribute (and <code>class="disabled-overlay"</code> to each radio you want submitted on form submission, and give the radio inputs that you want to appear disabled the <em>class</em> "disabled", with the following CSS (see it in action in <a href="http://jsfiddle.net/yz13LL69/2/" rel="nofollow">this jsfiddle</a>)</p>

<pre><code>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;
}
</code></pre>


blocks|key|2727644|text|您可以使用opacity|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2727645|​|2727646|#radio1+{
++++opacity:.5;
}|code-block|syntax|javascript|2727647|<input+type="radio"+id="radio1"+onclick="return+false"+/>
<input+type="radio"+id="radio2"+disabled="disabled"+/>|2727648|2727649|或者通过添加任何元素来创建自己的样式。|2727650|2727651|label+{
++display:+inline-block;
++width:+25px;
++height:+25px;
++position:+relative;
}
input[type="radio"]+{
++position:+absolute;
++visibility:+hidden;
}
input[type="radio"]+%2B+label+{
++border:+1px+solid+rgb(208,+208,+208);
++border-radius:+50%25;
}
label:before+{
++content:+'';
++border-radius:+50%25;
++position:+absolute;
++background:+rgb(208,+208,+208);
++left:+0;
++top:+0;
++display:+inline-block;
++width:+19px;
++height:+19px;
++margin:+3px+0+0+3px;
}|2727652|<input+type="radio"+id="radio1"+onclick="return+false"+/>
<label+for="radio1"></label>
<input+type="radio"+id="radio2"+disabled="disabled"+/>
<label+for="radio2"></label>|2727653|2727654|entityMap^0|5|7|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|16|8|@]|D|@]|E|$]]|$1|R|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|Y|$]]

<p>you can use <code>opacity</code></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#radio1 {
    opacity:.5;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="radio" id="radio1" onclick="return false" /&gt;
&lt;input type="radio" id="radio2" disabled="disabled" /&gt;</code></pre>
</div>
</div>
</p>

<p>or just create your own style by adding any element</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="radio" id="radio1" onclick="return false" /&gt;
&lt;label for="radio1"&gt;&lt;/label&gt;
&lt;input type="radio" id="radio2" disabled="disabled" /&gt;
&lt;label for="radio2"&gt;&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1489317|text|可以将收音机设置为“禁用”，单击“提交”按钮，使用jquery库使用以下代码删除禁用的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489318|$("#sub").click(function(){
++++++++$("input").removeAttr('disabled');
++++});
<input+type="submit"+value="Save"+id="sub"+/>|code-block|syntax|javascript|1489319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

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


<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;TEST&lt;/title&gt;
&lt;script&gt;

&lt;/script&gt;
&lt;style&gt;
#radio1 {
     /* how to make radio1 looks same as radio2*/
    pointer-events: none;
    opacity:0.5; 
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type="radio" id="radio1" onclick="return false"/&gt;
&lt;input type="radio" id="radio2" disabled="disabled"/&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

正如我们所知道的，如果我们将disabled=“禁用”设置为收音机，则当提交到后端时，它的值将在表单中丢失。而收音机没有只读属性。现在，我不想为禁用的收音机添加一个隐藏的，我只想使用js和css来使它看起来像禁用的。​<html><head><title>TEST</title><script></script><st...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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