Radio preventDefault() 不適用於 Chrome 和 FF 3.6，但適用於 IE9 和 Opera

Question

這是一個現場演示。

我有以下 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();
});

工作演示

Answer 2

如果沒有收音機會檢查我的解決方案是

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

因為當沒有選中組中的收音機時，不會阻止第一次點擊。