Question

这是一个live demo。

我有以下html：

<div  class="Q">
<div id="Q3"><span>1. </span>Which of the following is a string?</div>
<div class="A"><input type="radio"  id="Q3A1Correct" /></div> 
<div class="A"><input type="radio"  id="Q3A2Correct"/></div>
<div class="A"><input type="radio" id="Q3A3Correct" checked/></div>
<div class="A"><input type="radio"  id="Q3A4Correct" /></div>
</div>
<div  class="Q">
<div id="Q1"><span>2. </span>Which of the following have the same meaning?</div>
<div class="A"><input type="checkbox"  id="Q2A1Correct" /></div> 
<div class="A"><input type="checkbox"  id="Q2A2Correct" /></div>
<div class="A"><input type="checkbox" id="Q2A3Correct" checked/></div>
<div class="A"><input type="checkbox"  id="Q2A4Correct" /></div>
</div>

我想阻止用户更改选择，而不禁用输入。所以我这样做了：

    $(':checkbox[id$="Correct"]').click(function (event) {        
        event.preventDefault();
    });
    $(':radio[id$="Correct"]').click(function (event) {        
        event.preventDefault();
    });

它适用于所有浏览器的复选框，但对于无线电，它适用于IE9和Opera，但不适用于FF 3.6.17和Chrome。所以我很好奇为什么会这样，但我还需要一个解决方案，让它适用于所有浏览器。

感谢。

Answer 1

不是为什么它适用于一个但不适用于另一个但通常单选按钮具有相同的名称并且您做出选择所以我从那里开始

所以对于html

<div  class="Q">
    <div id="Q3"><span>1. </span>Which of the following is a string?</div>
    <div class="A"><input type="radio"  name="foo" /></div>
    <div class="A"><input type="radio"  name="foo"/></div>
    <div class="A"><input type="radio" name="foo" checked/></div>
    <div class="A"><input type="radio"  name="foo"/></div>
</div>

和jQuery

$('[name="foo"]:radio').click(function(event) {
    event.preventDefault();
});

working demo

Answer 2

如果没有收音机会检查我的解决方案

var radioChecked;
$element.bind('mousedown', function (event) {
    radioChecked = $element.is(':checked');
    $element.one('click', function (event) {
        $element.prop('checked', radioChecked);
        return false;
    });
});

因为当没有选中组中的无线电时，不会阻止第一次点击。

Radio preventDefault（）无法在Chrome和FF 3.6上运行，但可以在IE9和Opera上运行

2 个答案: