Meteor aktivieren/deaktivieren Kontrollkästchen mit Radio, zeigen/verstecken mit Kontrollkästchen

Question

In einer Tabelle habe ich eine Liste von Benutzern und einige Optionen, die ich für sie auswählen kann.

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

Der Anwender als Radio-Button angezeigt wird, ist die Optionen Kontrollkästchen von Informationen über den Benutzer, die ich (beide/nur einer zur Zeit) angezeigt werden soll.

1 Ich möchte die Auswahl der Optionen deaktivieren, wenn Sie den Benutzer nicht zuvor ausgewählt haben. Nachdem der Benutzer ausgewählt ist, können Sie die gewünschten Optionen auswählen

2 Ich muss etwas im Code Becose ändern, wenn ich jetzt den Benutzer 1 und die Option 1 auswähle, und dann wähle ich den Benutzer 2 Ich kann die Info sehen für die Option 1 von Benutzer 2, ohne das Kontrollkästchen Option 1 zu aktivieren.

Dies ist mein Code:

HTML

<template name="patients"> 
    <table> 
    <tr> 
     <th>Patient</th> 
     <th>Options</th> 
    </tr> 
    </table> 
    {{#each Users}} 
    <table> 
    <tr> 
     <th> 
      <label><input type="radio" class="selected" name="patient" value="{{this._id}}">{{this.profile.lastName}} {{this.profile.firstName}}</label> 
     </th> 
     <td> 
     <div class="patinf"> 
      <label><input type="checkbox" class="infos" name="{{this._id}}" id="showInfos"><span>OPT1</span></label> 
      <label><input type="checkbox" class="answers" name="{{this._id}}" id="showAnswers"><span>OPT2</i></span></label> 
     </div> 
     </td> 
    </tr> 
    </table> 
    {{/each}} 
    {{>display}} 
</template> 


<template name="display"> 
    {{#if isInfosClicked}} 
     <div name="showInfos"> 
     <h4>Infos for {{data.profile.lastName}} {{data.profile.firstName}}</h4> 

     </div> 
    {{/if}} 
    {{#if isAnswersClicked}} 
    <div name="showAnswers"> 
     <h4>Answers for {{data.profile.lastName}} {{data.profile.firstName}}</h4> 
    </div> 
    {{/if}} 
</template> 

Das ist mein 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; 
     } 
    }); 

Answer 1

Der Code unten sollten Sie auf dem Weg bringen, wo Sie wollen.

JS:

Template.patients.helpers({ 
Users: function() { // I used the fake Users collection 
     return Meteor.users.find({}).fetch(); 
    }, 
    isChecked: function(){ // disable the checkboxes if not choosen 
     return !(Session.get("selPat") === this._id); 
    } 
}); 

Template.patients.events({ 
    'click .selected': function (e){ 
     var selPat = $('input[name="patient"]:checked').val(); 
     if(selPat !== Session.get("selPat")){ 
      // if a different user is choosen, 
      // clear the checkboxes and the Sessions 
      Session.set("infosClicked", false); 
      Session.set("answersClicked", false); 
      $(`input[type="checkbox"]`).prop('checked', false); 
     } 
     Session.set("selPat",selPat); 
    }, 
    'click .infos': function(){ 
     Session.set("infosClicked", !Session.get("infosClicked")); 
    }, 
    'click .answers': function(){ 
     Session.set("answersClicked", !Session.get("answersClicked")); 
    },   
}); 


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

Im html der Hauptunterschied disabled attr mit Helfer Logik erweitert. Abgesehen davon habe ich es in einer Tabelle gebildet, wie Sie gezeigt haben.

HTML:

<template name="patients"> 
    <table> 
     <tr> 
      <th>Patient</th> 
      <th colspan="2">Options</th> 
     </tr> 

     {{#each Users}} 
     <tr> 
      <td> 
       <label><input type="radio" class="selected" name="patient" value="{{this._id}}">{{this.profile.lastName}} {{this.profile.firstName}}</label> 
      </td> 
      <td> 
       <div class="patinf"> 
        <label><input type="checkbox" class="infos" name="{{this._id}}" id="showInfos" disabled="{{isChecked}}"><span>OPT1</span></label> 
       </div> 
      </td> 
      <td> 
       <div class="patinf"> 
        <label><input type="checkbox" class="answers" name="{{this._id}}" id="showAnswers" disabled="{{isChecked}}"><span>OPT2</span></label> 
       </div> 
      </td> 
     </tr> 
     {{/each}} 
    </table> 
    {{>display}} 
</template> 


<template name="display"> 
    {{#if isInfosClicked}} 
     <div name="showInfos"> 
      <h4>Infos for {{data.profile.lastName}} {{data.profile.firstName}}</h4> 

     </div> 
    {{/if}} 
    {{#if isAnswersClicked}} 
     <div name="showAnswers"> 
      <h4>Answers for {{data.profile.lastName}} {{data.profile.firstName}}</h4> 
     </div> 
    {{/if}} 
</template> 

Nachdem es mit diesem zu arbeiten, würde ich vorschlagen, dass Sie einen Blick auf ReactiveVar nehmen, ist es eine empfohlene Lösung für das Template-Ebene Variablen, und Sie können sie kombinieren mit template data context Dann haben Sie mehr Kontrolle über Ihre Daten und den Vorlagenstatus.