带有收音机的Meteor启用/禁用复选框，带复选框的显示/隐藏

Question

在表格中，我有一个用户列表，以及我可以为他们选择的一些选项。

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

用户显示为单选按钮，选项是关于我想要显示的用户的信息的复选框（两者/只是一次）。

1如果您没有选择之前的用户，我想禁用选项。选择用户后，您可以选择所需的选项

2我需要更改代码中的内容，因为现在我选择用户1和选项1，然后我选择用户2我可以看到用户2的选项1的信息而不单击选项1复选框。

这是我的代码：

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>

这是我的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

下面的代码应该让你走上你想要的地方。

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;
   }
});

在html中，主要区别在于使用辅助逻辑添加disabled attr。除此之外我在你展示的表格中形成了它。

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>

在使用它之后，我建议你看看ReactiveVar，它是模板级变量的一个更推荐的解决方案，你可以将它与template data context结合，而不是你对你的数据和模板状态有更多的控制。