javascript - 启用并选择单选按钮并不是进行选择，而是仅在 Firefox 中进行

Question

我遇到一个问题，其中设置了一个复选框，选中该复选框将启用并选择通常禁用的单选按钮，取消选中它将禁用同一单选按钮(并选择另一个默认选项)。

在 Firefox 中，选中该框将按预期启用单选按钮，然后触发绑定(bind)事件以将“checked_radio click”记录到控制台，但不会在视觉上更改单选按钮或将单选按钮的选中属性设置为正确。。之后可以正常选择现在启用的 radio (再次触发点击事件)。

相反 - 取消选中该框会正确禁用 radio 并选择默认值 - 按预期工作。

它在 Chrome 和 Safari 中都按预期工作，并且无论我使用哪个版本的 jQuery，似乎都会失败。 Firefox 版本 28 和 29 已显示该问题，没有尝试其他版本。所有尝试均在 Mac OS X Mavericks 上进行。

那么，这里出了什么问题？

<小时/>

我已经在 JS Fiddle 中以最小状态重现了该问题。 ，为了完整性，下面也复制了其代码。

预期行为:

• 当您选中该复选框时，“选中的 radio ”选项应该会启用并被选中(此处的选择是我在 Firefox 中失败的)。
• 取消选中该复选框后，应选择“未选中的 radio ”选项，而“选中的 radio ”选项应被禁用。

HTML:

<label>
    <input id="checkbox" type="checkbox">
    Control Checkbox
</label>
<br>
<label>
    <input id="checked_radio" name="radios" type="radio" value="on">
</label>
    Checked Radio
<br>
<label>
    <input id="unchecked_radio" name="radios" type="radio" value="off" checked>
    Unchecked Radio
</label>

以及附带的 JavaScript:

var checkbox        = null
var checked_radio   = null
var unchecked_radio = null

$(document).ready(function(){
  checkbox        = $('#checkbox')
  checked_radio   = $('#checked_radio')
  unchecked_radio = $('#unchecked_radio')

  checkbox.click(update_radio)

  checked_radio.click(function(){ console.log('checked_radio click') })
  unchecked_radio.click(function(){ console.log('unchecked_radio click') })

  update_radio()
})

function update_radio() {
  if(checkbox.prop('checked')) {
    checked_radio.prop('disabled', false)
    checked_radio.click()
  } else {
    unchecked_radio.click()
    checked_radio.prop('disabled', true)
  }
}

Answer 1

使用checked_radio.prop('checked', true)代替checked_radio.click()