1

問題が発生しましたが、解決方法がわかりません (はい、検索機能を使用しても正しい結果が得られませんでした)。お役に立てれば幸いです。簡単な例はjsFiddleにあります。

私のセットアップは、ラジオ ボタンで構成される複数のボタンセットで構成されています。ユーザーが 1 つのボタンセットの値を押すとすぐに、他のボタンセットを更新して、ユーザーが行った選択を表示する必要があります。

私の問題は、ユーザーが初めてラジオボタンをクリックしたときにボタンセットが更新されることです (jsFiddle の例では、いずれかのボタンセットで 1 を押すと、もう一方が変更されます)。しかし、選択を切り替えた後に同じ要素を 2 回クリックしても更新されません (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

それにイライラし、インターネットをサーフィンした後、問題が何であるかがわかりました。.attr を使用する代わりに、.prop を使用する必要がありました。どうやら、.attr と .prop の違いについて読むのに時間を費やす必要があるようです。

于 2013-06-28T07:38:30.903 に答える