Meteor enable/disable 带有单选框的复选框，show/hide 带有复选框

Question

在 table 中，我有一个用户列表，以及我可以 select 为他们提供的一些选项。

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

用户显示为单选按钮，选项是关于我要显示的用户信息的复选框（both/just 一次一个）。

1 如果您没有 select 之前的用户，我想禁用选项的 selection。在用户 selected 之后，您可以 select 您想要的选项

2 我需要更改代码中的某些内容，因为如果现在我 select 用户 1 和选项 1，然后我 select 用户 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。除此之外，我按照你展示的 table 形成了它。

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, it is a more recommended solution for the template level variables, and you can combine it with template data context，因为您可以更好地控制数据和模板状态。

Meteor enable/disable 带有单选框的复选框，show/hide 带有复选框

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

javascript

checkbox

radio-button

meteor

meteor-blaze