JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<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>
       ...

JavaScript

$(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");
            }
        }
        }
  });