我想显示一个单选按钮,有它的值提交,但根据情况,它是不可编辑的。Disabled不起作用,因为它不提交值(或者它是否提交?),并且它使单选按钮变灰。只读是我真正想要的,但出于某种神秘的原因,它不起作用。
我是否需要使用一些奇怪的技巧来实现只读以达到预期的效果?我应该用JavaScript写吗?
顺便提一下,有人知道为什么只读在单选按钮中不起作用,而在其他输入标签中却起作用吗?这是HTML规范中不可理解的遗漏之一吗?
我想显示一个单选按钮,有它的值提交,但根据情况,它是不可编辑的。Disabled不起作用,因为它不提交值(或者它是否提交?),并且它使单选按钮变灰。只读是我真正想要的,但出于某种神秘的原因,它不起作用。
我是否需要使用一些奇怪的技巧来实现只读以达到预期的效果?我应该用JavaScript写吗?
顺便提一下,有人知道为什么只读在单选按钮中不起作用,而在其他输入标签中却起作用吗?这是HTML规范中不可理解的遗漏之一吗?
当前回答
Disabled作用于单个单选按钮(不是整个集合)。 如果您正在使用PHP,并且在浏览器中加载页面之前,服务器上已经知道您的情况,那么您可以使用这个非常简单的解决方案。
<php $chcky= (condition) ? 'checked' : 'disabled';?>
<php $chckn= (condition) ? 'checked' : 'disabled';?>
<input type="radio" name="var" value="Yes" <?php echo $chcky?>></input>
<input type="radio" name="var" value="No" <?php echo $chckn?>></input>
我在响应表单提交的页面上使用它。
其他回答
我想出了一个javascript的方法来实现复选框和单选按钮的只读状态。它针对当前版本的Firefox, Opera, Safari,谷歌Chrome,以及当前和以前版本的IE(直到IE7)进行了测试。
为什么不简单地使用disabled属性呢?打印页面时,禁用的输入元素显示为灰色。实现此功能的客户希望所有元素都是相同的颜色。
我不确定我是否可以在这里发布源代码,因为我是在为一家公司工作时开发的,但我肯定可以分享这些概念。
使用onmousedown事件,您可以在单击操作更改选择状态之前读取它。因此,您存储这些信息,然后使用onclick事件恢复这些状态。
<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>
<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>
javascript部分将像这样工作(同样只是概念):
var selectionStore = new Object(); // keep the currently selected items' ids in a store
function storeSelectedRadiosForThisGroup(elementName) {
// get all the elements for this group
var radioOrSelectGroup = document.getElementsByName(elementName);
// iterate over the group to find the selected values and store the selected ids in the selectionStore
// ((radioOrSelectGroup[i].checked == true) tells you that)
// remember checkbox groups can have multiple checked items, so you you might need an array for the ids
...
}
function setSelectedStateForEachElementOfThisGroup(elementName) {
// iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
...
// make sure you return false here
return false;
}
您现在可以通过更改输入元素的onclick和onmousedown属性来启用/禁用单选按钮/复选框。
Disabled作用于单个单选按钮(不是整个集合)。 如果您正在使用PHP,并且在浏览器中加载页面之前,服务器上已经知道您的情况,那么您可以使用这个非常简单的解决方案。
<php $chcky= (condition) ? 'checked' : 'disabled';?>
<php $chckn= (condition) ? 'checked' : 'disabled';?>
<input type="radio" name="var" value="Yes" <?php echo $chcky?>></input>
<input type="radio" name="var" value="No" <?php echo $chckn?>></input>
我在响应表单提交的页面上使用它。
只有在有其他选项时,单选按钮才需要是只读的。如果没有其他选项,则无法取消选中的单选按钮。如果你有其他选项,你可以通过禁用其他选项来阻止用户更改值:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
小提琴:http://jsfiddle.net/qqVGu/
这是你可以使用的技巧。
<input type="radio" name="name" onclick="this.checked = false;" />
这是我的解决方案(覆盖)Sencha ExtJS 7.2+(复选框和单选覆盖)
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;
}
}
});