1

我遇到了一个问题，不知道如何解决（是的，我使用了搜索功能但没有正确的结果）。希望你能帮忙。一个简单的例子可以在jsFiddle中找到。

我的设置由多个由单选按钮组成的按钮组组成。一旦用户在一个按钮组上按下了一个值，另一个按钮组应该被更新以显示用户所做的选择。

我的问题是按钮集在用户第一次单击单选按钮时更新（在 jsFiddle 示例中，在任一按钮集上按 1 会更改另一个按钮集）。但是在切换选项后第二次单击同一元素不再更新它（在 jsFiddle 示例中，单击 1 -> 0 -> 1 将显示问题）。我使用了 Google Chrome 开发人员功能，发现即使我刷新（按钮或按钮集），只要元素更新，checked="checked" 状态仍然存在。我试图通过跟踪先前单击的单选按钮并将其设置为 false（在 jsFiddle 示例中注释掉）来解决此问题。这会带走属性，但是没有视觉更新。

那么关于如何解决这个问题的任何想法？使用的库只是 jQuery 之一。

HTML：

<div id="two_buttonsets">
<div id="test1">
    <input type="radio" id="component_0_test_0" name="component_test_0" value="0" checked="checked" />
    <label for="component_0_test_0">0</label>
    <input type="radio" id="component_1_test_0" name="component_test_0" value="1" />
    <label for="component_1_test_0">1</label>
    <input type="radio" id="component_2_test_0" name="component_test_0" value="2" />
    <label for="component_2_test_0">2</label>
</div>
<div id="test2">
    <input type="radio" id="component_0_test_1" name="component_test_1" value="0" checked="checked" />
    <label for="component_0_test_1">0</label>
    <input type="radio" id="component_1_test_1" name="component_test_1" value="1" />
    <label for="component_1_test_1">1</label>
    <input type="radio" id="component_2_test_1" name="component_test_1" value="2" />
    <label for="component_2_test_1">2</label>
</div>

JS/jQuery：

jQuery(function () {
$('#test1').buttonset();
$('#test2').buttonset();

/*var previous_clicked = [];
 $( '#two_buttonsets div[id*="test"] input:checked' ).each(function(){
 previous_clicked.push($(this).attr('id'));  
 });*/

// Once an component button is clicked
$('div[id*="test"] input').click(function () {

    // Setting the previous clicked values to checked=false
    /*for(var previous=0;previous<previous_clicked.length;previous++){
    $( '#'+previous_clicked[previous] ).attr('checked',false);
    $( '#'+previous_clicked[previous] ).button('refresh');
    }
    previous_clicked = [];*/

    // Set all other buttonsets to the same value
    var button_id = $(this).attr('id');
    var to = button_id.lastIndexOf('_', button_id.lastIndexOf('_') - 1) + 1;
    var track_number = button_id.substring(0, to);

    // Change all check buttons
    $('div[id*="test"] input[id*="' + track_number + '"]').each(function () {
        $(this).attr('checked', true);
        // $(this).button('refresh'); // Also doesn't work
        //previous_clicked.push($(this).attr('id'));
    })

    $('#test1').buttonset('refresh');
    $('#test2').buttonset('refresh');
})
})
4

1 回答 1

0

在对它感到恼火并且仍然在网上冲浪之后，我发现了问题所在。我应该使用 .prop，而不是使用 .attr。显然我应该花一些时间来了解 .attr 和 .prop 之间的区别。

于 2013-06-28T07:38:30.903 回答