blocks|key|267979|text|<input+type="checkbox"+checked+onclick="return+false;"+onkeydown="return+false;"/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|267980|http://jsfiddle.net/2srjc/|unstyled|offset|length|267981|如果您担心tab键顺序，请仅在未按tab键时为keydown事件返回false：|267982|<input+type="checkbox"+checked+onclick="return+false;"+onkeydown="e+=+e+%7C%7C+window.event;+if(e.keyCode+!==+9)+return+false;"/>|267983|http://jsfiddle.net/2srjc/149/|267984|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|Q|0|0|0|0|0|U|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|X|8|@]|9|@$G|Y|H|Z|1|10]]|A|$]]|$1|I|3|J|5|F|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|O|3|-4|5|F|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|E]]|V|$5|R|S|T|A|$U|N]]]]

<pre><code>&lt;input type="checkbox" checked onclick="return false;" onkeydown="return false;"/&gt;
</code></pre>

<a href="http://jsfiddle.net/2srjc/" rel="noreferrer">http://jsfiddle.net/2srjc/</a>

If you are worried about tab order, only return false for the keydown event when the tab key was not pressed:

<pre><code>&lt;input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/&gt;
</code></pre>

<a href="http://jsfiddle.net/2srjc/149/" rel="noreferrer">http://jsfiddle.net/2srjc/149/</a>

blocks|key|485117|text|您可以简单地添加onclick="return+false"+-这将停止浏览器执行默认操作(复选框选中/未选中将不会更改)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|485118|entityMap^0|8|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You may simply add <code>onclick="return false"</code> - this will stop browser executing default action (checkbox checked/not checked will not be changed)

blocks|key|268154|text|我使用JQuery，所以我可以在复选框上使用readonly属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268155|//This+will+make+all+read-only+check+boxes+truly+read-only
$('input[type="checkbox"][readonly]').on("click.readonly",+function(event){event.preventDefault();}).css("opacity",+"0.5");|code-block|syntax|javascript|268156|如果希望复选框再次可编辑，则需要对特定复选框执行以下操作。|268157|$('specific+checkbox').off('.readonly').removeAttr("readonly").css("opacity",+"1")|268158|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I use JQuery so I can use the readonly attribute on checkboxes. 

<pre><code>//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");
</code></pre>

If you want the checkbox to be editable again then you need to do the following for the specific checkbox.

<pre><code>$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")
</code></pre>

blocks|key|485315|text|做一个没有名称和值的假复选框，强制隐藏字段中的值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485316|<input+type="checkbox"+disabled="disabled"+checked="checked">
<input+type="hidden"+name="name"+value="true">|code-block|syntax|javascript|485317|注意:如果将name和value放入复选框中，它无论如何都会被具有相同名称的输入所覆盖|485318|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Make a fake checkbox with no name and value, force the value in an hidden field:

<pre><code>&lt;input type="checkbox" disabled="disabled" checked="checked"&gt;
&lt;input type="hidden" name="name" value="true"&gt;
</code></pre>

Note: if you put name and value in the checkbox, it will be anyway overwritten by the input with the same name

blocks|key|485364|text|以上这些对我来说都不起作用。这是我的vanilla.js解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485365|(function()+{
++++function+handleSubmit(event)+{
++++++++var+form+=+event.target;
++++++++var+nodes+=+form.querySelectorAll("input[disabled]");
++++++++for+(var+node+of+nodes)+{
++++++++++++node.disabled+=+false;
++++++++}
++++}

++++function+init()+{
++++++++var+submit_form_tag+=+document.getElementById('new_whatever');
++++++++submit_form_tag.addEventListener('submit',+handleSubmit,+true);
++++}

++++window.onload+=+init_beworst;

})();|code-block|syntax|javascript|485366|请确保为表单id提供适当的替换。|485367|我的应用程序有一些上下文，其中一些框是预先选中的，而另一些框则限制了您可以选中的其他框的数量。当您达到该限制时，所有未预先选中的框都会被禁用，如果您取消选中其中一个，则所有未预先选中的框都会再次启用。当用户按下submit时，所有选中的框都会提交给用户，而不管它们是否被预先选中。|485368|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

None of the above worked for me. Here's my vanilla.js solution: 

<pre><code>(function() {
 function handleSubmit(event) {
 var form = event.target;
 var nodes = form.querySelectorAll("input[disabled]");
 for (var node of nodes) {
 node.disabled = false;
 }
 }

 function init() {
 var submit_form_tag = document.getElementById('new_whatever');
 submit_form_tag.addEventListener('submit', handleSubmit, true);
 }

 window.onload = init_beworst;

})();
</code></pre>

Be sure to provide an appropriate replacement for the form id.

My application has a bit of context, where some boxes are pre-checked, and others you have a limit of how many of the other boxes you can check. When you hit that limit, all the non-pre-checked boxes are disabled, and if you uncheck one all the non-pre-checked boxes are enabled again. When the user presses submit all the checked boxes are submitted to the user, regardless of whether they're pre-checked or not.

blocks|key|485412|text|在我的例子中，我只在某些条件下需要它，并且在HTML中很容易做到：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485413|<input+type="checkbox"+[style.pointer-events]="(condition+==+true)+?+'none'+:+'auto'">+|code-block|syntax|javascript|485414|或者，如果你一直需要这样做的话：|485415|<input+type="checkbox"+style="pointer-events:+none;">|485416|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In my case, i only needed it within certain conditions, and to be done easily in HTML:
<pre><code>&lt;input type=&quot;checkbox&quot; [style.pointer-events]=&quot;(condition == true) ? 'none' : 'auto'&quot;&gt; 
</code></pre>
Or in case you need this consistently:
<pre><code>&lt;input type=&quot;checkbox&quot; style=&quot;pointer-events: none;&quot;&gt;
</code></pre>

blocks|key|268398|text|你不能直接做，但你可以用我试过的方法做，同时也很简单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268399|HTML：|268400|<input+type="checkbox"+checked++disabled="true"+class="style"+/>|offset|length|style|CODE|268401|CSS：|268402|.style{+opacity:+1;+}|268403|entityMap^0|0|0|0|1S|0|0|0|L|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@$F|S|G|T|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@$F|W|G|X|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

You can't do it directly, but you can do it with this way I try it, and it's work fine with me at the same time it is so simple
HTML :
<code>&lt;input type=&quot;checkbox&quot; checked disabled=&quot;true&quot; class=&quot;style&quot; /&gt;</code>
CSS :
<code>.style{ opacity: 1; }</code>

blocks|key|268451|text|以下是我对Sencha+ExtJS+7.2%2B的解决方案(覆盖)(复选框和单选按钮在单个覆盖中)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268452|Ext.define('MyApp.override.field.Checkbox',+{
++++override:+'Ext.field.Checkbox',

++++/**
+++++*+OVERRIDE:+to+allow+updateReadOnly+to+work+propperly
+++++*+@param+{boolean}+newValue
+++++*
+++++*+To+ensure+the+disabled+state+stays+active+if+the+field+is+still+readOnly
+++++*+we+re+-+set+the+disabled+state
+++++*/
++++updateDisabled(newValue)+{
++++++++this.callParent(arguments);

++++++++if+(!newValue+&&+this.getReadOnly())+{
++++++++++++this.inputElement.dom.disabled+=+true;
++++++++}
++++},

++++/**
+++++*+OVERRIDE:+readonly+for+radiogroups+and+checkboxgroup+do+not+work+as+other+fields
+++++*+++++https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
+++++*
+++++*+@param+{boolean}+newValue
+++++*
+++++*++-+use+disabled+on+the+field
+++++*/
++++updateReadOnly(value)+{
++++++++this.callParent(arguments);

++++++++if+(!this.getDisabled())+{
++++++++++++this.inputElement.dom.disabled+=+value;
++++++++}
++++}
});|code-block|syntax|javascript|268453|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|$]]

Here is my solution (override) for Sencha ExtJS 7.2+ (checkbox and radio in a single override)
<pre><code>
Ext.define('MyApp.override.field.Checkbox', {
 override: 'Ext.field.Checkbox',

 /**
 * OVERRIDE: to allow updateReadOnly to work propperly
 * @param {boolean} newValue
 *
 * To ensure the disabled state stays active if the field is still readOnly
 * we re - set the disabled state
 */
 updateDisabled(newValue) {
 this.callParent(arguments);

 if (!newValue &amp;&amp; this.getReadOnly()) {
 this.inputElement.dom.disabled = true;
 }
 },

 /**
 * OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
 * https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
 *
 * @param {boolean} newValue
 *
 * - use disabled on the field
 */
 updateReadOnly(value) {
 this.callParent(arguments);

 if (!this.getDisabled()) {
 this.inputElement.dom.disabled = value;
 }
 }
});
</code></pre>

blocks|key|485266|text|document.getElementById("your+checkbox+id").disabled=true;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|485267|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>document.getElementById("your checkbox id").disabled=true;
</code></pre>

I have a form where I have to post form values to my action class. In this form I have a checkbox that needs to be readonly. I tried setting <code>disabled="true"</code> but that doesn't work when posting to the action class. 

So please advice??

How can I make a checkbox readonly? not disabled?

Sencha

我有一个表单，我必须在其中将表单值发布到我的操作类中。在此表单中，我有一个需要为只读的复选框。我尝试设置disabled="true"，但在发布到操作类时不起作用。所以请给我一些建议？

问如何将复选框设为只读？未禁用？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将复选框设为只读？未禁用？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将复选框设为只读？未禁用？
EN