jQuery，Chrome和“选定”属性exception

我在Chrome中遇到过一个问题我无法判断它是否是Chrome的错误，jQuery的错误或我的代码中的错误。 我正在使用Chromium搜索未解决的问题，并且无法使用jQuery找到任何内容。 我在这里创建了一个JSFiddle（并将包含以下代码用于后代）： http ： //jsfiddle.net/trmackenzie/cvPhd/4/

预期：当我单击单选按钮时，将在选项列表中选择指示的值。 此外，如果单击列表中的特定选项，则取消选择所有单选按钮。

实际（适用于Windows和Mac的Chrome 21）：首次单击单选按钮时，仅选择了最后一个所需选项，然后后续点击不会导致任何操作。 如果选择列表中的特定选项，则仍会选中单选按钮。

实际（在IE7,8,9和Firefox中）：与预期行为相同，例如正确的行为。

请注意，选项上的“已选择”属性设置正确，但Chrome停止显示其状态。

这是jsFiddle中也可用的代码：

     First Second Third Fourth Fifth    Testing  Testing  Testing   ​ 

jQuery：

 $(document).ready(function () { var columnList = $('#testList_box'); var columnSpecList = $('#columnSpecList'); var columnSpecOptions = $('input', columnSpecList); $(columnSpecOptions).click(function () { var optionsToSelect = $(this).val().split(','); // clear the list $(':selected', columnList).removeProp('selected'); // select desired columns $(optionsToSelect).each(function (index, value) { $('[value=' + value + ']', columnList).prop('selected', 'true'); }); }); $(columnList).on( { click: deselectSpec, change: deselectSpec } ); // simulate "click" of the selected option to load the initial values var itemToClick = $(":checked", columnSpecList); $(itemToClick).click(); function deselectSpec() { $(columnSpecOptions).removeProp('checked'); } });​ 

我是否遇到过一个错误或者（更有可能）我在某个地方的实现中遗漏了一些细微之处？

Answer 1

不要使用.removeProp（）!! 除非您打算再也不要使用该物业。 使用布尔值来设置它们

 .prop('checked',true or false) 

来自jQuery docs .removeProp

注意：请勿使用此方法删除本机属性，例如已选中，已禁用或已选中。 这将完全删除属性，一旦删除，就不能再次添加到元素。 使用.prop（）将这些属性设置为false。

你有过

 // clear the list $(':selected', columnList).removeProp('selected'); // select desired columns $(optionsToSelect).each(function (index, value) { $('[value=' + value + ']', columnList).prop('selected', 'true'); }); 

将其更改为

 $(':selected', columnList).prop('selected',false); // select desired columns $(optionsToSelect).each(function (index, value) { $('[value=' + value + ']', columnList).prop('selected', true); }); 

你有

 function deselectSpec() { $(columnSpecOptions).removeProp('checked'); } 

将其更改为

 function deselectSpec() { $(columnSpecOptions).prop('checked',false); } 

http://jsfiddle.net/cvPhd/7/

Answer 2

我使用attr（）和removeAttr（）方法而不是removeProp（）和prop（），一切正常。

 $(document).ready(function () { var columnList = $('#testList_box'); var columnSpecList = $('#columnSpecList'); var columnSpecOptions = $('input', columnSpecList); $(columnSpecOptions).click(function () { var optionsToSelect = $(this).val().split(','); // clear the list $(columnList).find('option').removeAttr('selected'); // select desired columns $(optionsToSelect).each(function (index, value) { $('[value=' + value + ']', columnList).attr('selected', 'selected'); }); }); $(columnList).on( { click: deselectSpec, change: deselectSpec } ); // simulate "click" of the selected option to load the initial values var itemToClick = $(":checked", columnSpecList); $(itemToClick).click(); function deselectSpec() { $(columnSpecOptions).removeProp('checked'); } });​ 

编辑：固定代码