Связанные радиокнопки не обновляются при втором нажатии

Question

Я столкнулся с проблемой и понятия не имею, как ее решить (и да, я использовал функцию поиска без правильного результата). Надеюсь, вы можете помочь. Простой пример можно найти в jsFiddle.

Моя настройка состоит из нескольких наборов кнопок, состоящих из переключателей. Как только пользователь нажимает значение на одном наборе кнопок, другой набор кнопок должен быть обновлен, чтобы показать выбор, сделанный пользователем.

Моя проблема заключается в том, что набор кнопок обновляется при первом нажатии пользователем радиокнопки (в примере с jsFiddle нажатие 1 на одной кнопке изменяет другую). Но второй щелчок по тому же элементу после переключения выбора больше не обновляет его (в примере с jsFiddle нажатие 1 -> 0 -> 1 покажет проблему). Я воспользовался функцией разработчика Google Chrome и обнаружил, что, хотя я обновляю (либо кнопку, либо набор кнопок), как только элемент обновляется, статус флажка = "проверен" остается. Я попытался решить эту проблему, отслеживая предыдущую нажатую кнопку радио и устанавливая для нее значение 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');
})
})

Answer 1

После того, как я был раздражен этим и все еще занимался серфингом в интернете, я понял, в чем проблема. Вместо использования.attr я должен был использовать.prop. Очевидно, я должен потратить некоторое время на чтение о разнице между.attr и.prop.