ブートストラップ - 兄弟との2つのボタンの相互排他チェックボックス（）

Question

チェックボックスを相互排他的にして2つのボタングループを取得しようとしています。

は、ここにあなたが見ることができるように、（id="UserVsComputer"、id="User1VsUser2"、id="PlayableHits"とid="button-new-game"付き）4つのdiv要素があるこのjsfiddle

に私の現在の結果です。

私たちは<input>（右<div>に対応するすなわち）に関するのチェックボックスをクリックすると、二つの第一<div>（UserVsComputerとUser1VsUser2）は相互に排他的になりたいです。

は、Javascriptの一部では、私がやった：

// Select the clicked checkbox for game type           
    $('input.game').on('click',function(){             
    setGameType(); 
    }); 

    function setGameType() { 
    // Get state of the first clicked element 
    var element = $('#UserVsComputer input.game'); 
    var checkBoxState = element.prop('checked'); 
    // Set !checkBoxState for the sibling checkbox, i.e the other 
    element.siblings().find('input.game').prop('checked',!checkBoxState); 
    updateGameType(); 
    } 

    function updateGameType() { 
    // Set type of game 
    if ($('#UserVsComputer input').prop('checked')) 
    gameType = 'UserVsComputer'; 
    else 
    gameType = 'User1VsUser2'; 
    } 

私は<div id="PlayableHits" class="checkbox">は2つの最初のチェックボックスに、この相互排除によって気にする必要はありません。

たとえば、私は彼らが排他的にすることなく、真の2最初のチェックボックスを設定できることを示すキャプチャ以下

：

私のエラーがどこにあるか、誰かが見ることができるので、もし私が、表示されません何が間違って...

おかげ

Answer 1

は、以下のことを試してみてください - 確認されたチェックボックスを確認するためにクリックイベントのターゲットを使用しています。

// Select the clicked checkbox for game type 
$('input.game').on('click',function(e){ 
    setGameType(e.target); 
}); 

function setGameType(cb) { 
    var container = $(cb).parent().parent(); 
    var checkBox = $(cb); 
    var checkBoxState = checkBox.prop('checked'); 

    // Set !checkBoxState for the sibling checkbox, i.e the other 
    container.siblings().find('input.game').prop('checked', !checkBoxState); 
    updateGameType(); 
} 

function updateGameType() { 
    // Set type of game 
    if ($('#UserVsComputer input').prop('checked')) { 
    gameType = 'UserVsComputer'; 
    } else { 
    gameType = 'User1VsUser2'; 
    } 
} 

（ハードコードさ.parent().parent()はかなりありませんが、このケースで働くいくつかの注意を使用することができ、他のビットがあります。..