mardi 12 décembre 2017

Meteor enable/disable checkbox with radio, show/hide with checkbox

In a table I have a list of users,and some options that I can selecte for them.

||USER          ||      OPTIONs  ||
||User1         ||  Opt1 || Opt2 ||
||User2         ||  Opt1 || Opt2 ||

The users are displayed as radio button, the options are checkboxes of info about the user that I want to display(both/just one at time).

1 I want to disable the selection of the options if you didn't select the user before them. After the user is selected you can select the options you want

2 I need to change something in the code becose if now I select the user 1 and the option 1, and then I select the user 2 I can see the info for the option 1 of user 2 without clicking on the option 1 check box.

This is my code:

HTML

<template name="patients">
  <table>
     <tr>
        <th>Patient</th>
        <th>Options</th>
     </tr>
  </table>
  
  <table>
     <tr>
       <th>
          <label><input type="radio" class="selected" name="patient" value=""> </label>
       </th>
       <td>
         <div class="patinf">
           <label><input type="checkbox" class="infos" name=""  id="showInfos"><span>OPT1</span></label>
           <label><input type="checkbox" class="answers" name="" id="showAnswers"><span>OPT2</i></span></label>
        </div>
      </td>
    </tr>
  </table>
  
  
</template>


<template name="display">
  
      <div name="showInfos">
        <h4>Infos for  </h4>

      </div>
  
  
    <div name="showAnswers">
        <h4>Answers for  </h4>
    </div>
  
</template>

This is my JS

     Template.patients.helpers({
        Users: function() {
            return Meteor.users.find({});
        },
     });

     Template.patients.events({
        'click .selected': function (){
        var selPat = $('input[name="patient"]:checked').val();
        Session.set("selPat",selPat);
        }
     });


     Template.patients.events({
        'click .infos': function(){
          Session.set("infosClicked", true);
         },
        'click .answers': function(){
          Session.set("answersClicked", true);
         },        
     });

     Template.display.helpers({
        isInfosClicked: function(){
            return Session.get("infosClicked");
        },
        isAnswersClicked: function(){
            return Session.get("answersClicked");
        },
        data: function(){
            var PAT= Meteor.users.findOne({ _id: Session.get("selPat")});
            return PAT;
       }
     });




Aucun commentaire:

Enregistrer un commentaire