我想显示一个单选按钮,提交其值,但根据情况,使其不可编辑。禁用不起作用,因为它不提交值(或者是?),并且它使单选按钮变灰。只读确实是我想要的,但是由于某些神秘的原因,它不起作用。
是否需要一些怪异的技巧才能使只读功能按预期工作?我应该只用JavaScript来做吗?
顺便说一句,有人知道为什么只读在单选按钮中不起作用,而在其他输入标签中却起作用吗?这是HTML规范中那些无法理解的遗漏之一吗?
我想显示一个单选按钮,提交其值,但根据情况,使其不可编辑。禁用不起作用,因为它不提交值(或者是?),并且它使单选按钮变灰。只读确实是我想要的,但是由于某些神秘的原因,它不起作用。
是否需要一些怪异的技巧才能使只读功能按预期工作?我应该只用JavaScript来做吗?
顺便说一句,有人知道为什么只读在单选按钮中不起作用,而在其他输入标签中却起作用吗?这是HTML规范中那些无法理解的遗漏之一吗?
Answers:
通过仅禁用未选中的单选按钮,我伪造了单选按钮的只读权限。它使用户无法选择其他值,并且选中的值将始终在提交时过帐。
使用jQuery进行只读:
$(':radio:not(:checked)').attr('disabled', true);
除了需要禁用每个未选择的选项之外,该方法还可以使选择列表变为只读。
readonly
属性,因为OP希望它起作用:$(':radio[readonly]:not(:checked)').attr('disabled', true);
仅当存在其他选项时,单选按钮才需要是只读的。如果没有其他选项,则不能取消选中选中的单选按钮。如果您还有其他选项,则可以仅通过禁用其他选项来阻止用户更改值:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
小提琴:http : //jsfiddle.net/qqVGu/
onclick="return false"
防止改变。
这是您可以使用的技巧。
<input type="radio" name="name" onclick="this.checked = false;" />
onClick="this.checked = <%=value%>"
有所不同:)
onclick="return false;"
将组的值保持不变
我想出了一种使用JavaScript的方式来实现复选框和单选按钮的只读状态。已针对Firefox,Opera,Safari,Google Chrome的当前版本以及IE的当前和早期版本(低至IE7)进行了测试。
为什么不简单使用您要求的禁用属性?打印页面时,禁用的输入元素显示为灰色。为其实施此方法的客户希望所有元素都呈现相同的颜色。
我不确定是否可以在此处发布源代码,因为我是在为公司工作时开发的,但是我可以肯定地分享一些概念。
使用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属性来启用/禁用单选按钮/复选框。
JavaScript方式-这对我有用。
<script>
$(document).ready(function() {
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>
原因:
$('#YourTableId').find('*')
->这将返回所有标签。
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
遍历此对象中捕获的所有对象并禁用输入标签。
分析(调试):
form:radiobutton
在内部被视为“输入”标签。
就像上面的function()一样,如果您尝试打印 document.write(this.tagName);
无论在何处,只要在标签中找到单选按钮,它都会返回输入标签。
因此,可以通过将*替换为输入,将上述代码行针对单选按钮标签进行更优化:
$('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });
我发现使用onclick='this.checked = false;'
在一定程度上有效。将不会选择单击的单选按钮。但是,如果已经选择了一个单选按钮(例如,默认值),则该单选按钮将变为未选择状态。
<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>
对于这种情况,保留默认值并禁用其他单选按钮将保留已选择的单选按钮,并防止未选择它。
<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>
此解决方案不是防止更改默认值的最优雅的方法,但是无论是否启用了javascript,它都将起作用。
如何在JS中捕获“ On_click()”事件并像此处进行检查那样呢?