связь между несколькими радиобоксами (включить / отключить) с помощью jquery ui - PullRequest
Новая
       30

связь между несколькими радиобоксами (включить / отключить) с помощью jquery ui

0 голосов
/ 20 января 2012

Я пытаюсь создать взаимосвязь между некоторыми флажками следующим образом: Что я хочу сделать, так это то, что если число выбрано в строке, оно будет затенено в трех других строках. На первый взгляд код для выбора работает хорошо, но после сброса и некоторого выбора / отмены выбора он не работает должным образом ...

Может кто-нибудь помочь мне исправить и упростить это плз:)

Заранее спасибо! 

<div>
    <div id="choixx">
    <div id="choix1" class="ui-buttonset choix">  
        <input type="radio" id="chk4_choice1" name="grp1"  onclick="checkColumn(this);" ><label for="chk4_choice1">4</label> 
        <input type="radio" id="chk3_choice1" name="grp1"  onclick="checkColumn(this);"> <label for="chk3_choice1">3</label> 
        <input type="radio" id="chk2_choice1" name="grp1"  onclick="checkColumn(this);"> <label for="chk2_choice1">2</label> 
        <input type="radio" id="chk1_choice1" name="grp1"  onclick="checkColumn(this);"><label for="chk1_choice1">1</label> 
    </div>
    <div id="choix2" class="ui-buttonset choix"> 
        <input type="radio" id="chk4_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk4_choice2">4</label> 
        <input type="radio" id="chk3_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk3_choice2">3</label>
        <input type="radio" id="chk2_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk2_choice2">2</label> 
        <input type="radio" id="chk1_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk1_choice2">1</label>
    </div>
    <div id="choix3" class="ui-buttonset choix">  
        <input type="radio" id="chk4_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk4_choice3">4</label> 
        <input type="radio" id="chk3_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk3_choice3">3</label>
        <input type="radio" id="chk2_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk2_choice3">2</label>
        <input type="radio" id="chk1_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk1_choice3">1</label>
    </div> 
    <div id="choix4" class="ui-buttonset choix"> 
        <input type="radio" id="chk4_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk4_choice4">4</label>
        <input type="radio" id="chk3_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk3_choice4">3</label>
        <input type="radio" id="chk2_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk2_choice4">2</label>
        <input type="radio" id="chk1_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk1_choice4">1</label>
    </div>
</div>
<input type="reset" onclick="resetAll();" value="Start Over">

 <script>
    $(function() {
        $( "#choixx" ).buttonset();

    });
        var disabled_cols = [0,0,0,0];
        function checkColumn(elem) {
        cur_col_id = parseInt(elem.id.slice(3,4));
        cur_line_id = parseInt(elem.id.slice(11,12));
        console.log( "col=" + cur_col_id + " line=" + cur_line_id );
        var prev_col_id = disabled_cols[cur_line_id-1];
    // reactiver les colonnes precedemment désactivées si necessaire
        if (prev_col_id != 0) {
            for (var line=1; line<5; line++){
            var elem_id = "#chk" + prev_col_id + "_choice" + line;
            console.log( "enable elem_id :" + elem_id);
            if (line != cur_line_id) {
                $(elem_id).button("option", "disabled", false);
                $(elem_id).next('label').removeAttr("aria-pressed");     
            }
            }
        }
      // desactivation d'une nouvelle colonne
        for (var line=1; line<5; line++){
            var elem_id = "#chk" + cur_col_id + "_choice" + line;
          //  console.log( "disable elem_id :" + elem_id);
            if (line != cur_line_id) {
            $(elem_id).button( "option", "disabled", true );
            $(elem_id).next('label').removeAttr("aria-pressed");
            }
        }
        disabled_cols[cur_line_id-1] = cur_col_id;
        }

     // reinitialliser toutes les radiobox
        function resetAll() {
        for (var col=1; col<5; col++){
            for (var line=1; line<5; line++){
      //console.log( "col=" + col);
            var elem_id = "#chk" + col + "_choice" + line;
    //    console.log("elem_id" + elem_id);
    $(elem_id).button("option", "disabled", false);
         $(elem_id).next('label').removeAttr("aria-pressed");
    $(elem_id).next('label').removeClass("ui-state-active");
            }
        }
        }
    </script>

Ответы [ 2 ]

2 голосов
/ 20 января 2012

Как насчет того, чтобы сделать это с НАМНОГО меньшим количеством javascript: jsFiddle 

$( "#choixx" ).buttonset();
$('#4by4 input[type=radio]').change(function(){
    $('input').button( "enable" );
    $('input:checked').each(function(i,el){
        var $target = $(el);
        var column = parseInt($target.attr('id').charAt(3), 10);
        $('.button' + column).not($target).button( "disable" );
    });  
});
$("#4by4").bind("reset", function() {
  $(this).find('input').button( "enable" );
});

Я добавил класс для каждой из кнопок для простоты нацеливания, но мы могли бы сделать это безесли необходимо.Также я обернул все входные данные в <form>, чтобы мы могли правильно зафиксировать событие «reset».

0 голосов
/ 20 января 2012

Если вы измените функцию сброса на: 

function resetAll() {
    $('input:radio').button("option", "disabled", false).removeProp('checked');
    $('input:radio').next('label').removeAttr("aria-pressed");
}

это должно дать вам надлежащие результаты для сброса.

...