是/否按钮

Question

我使用autoform问一个是，没问题，我想有两个按钮，一个说是，另一个说不。通过使用aldeed:autoform-bs-button-group-input，我可以使用我的架构中的下面的代码生成两个按钮，但是这并不能单独设置每个按钮的样式。例如，我希望一个是绿色的，一个是红色的。我怎样才能做到这一点？

路径：Schema.js

answer: {
        type: String,
        optional: true,
        allowedValues: ['Yes', 'No'],
        autoform: {
                type: "select-radio",
                options: function () {
                return [
                {label: "Yes", value: 'Yes'},
                {label: "No", value: 'No'},
                ];
            }
        }
    }

路径：template.js

{{#autoForm collection="questions" id=makeUniqueID doc=this type="update" autosave=true}}      
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}}
{{/autoForm}}

Answer 1

首先让我们添加一个类属性autoform：

{{#autoForm class="YesNoStyles" collection="questions" id=makeUniqueID doc=this type="update" autosave=true }}      
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}}
{{/autoForm}}

这会传递给生成的<form>标记，我们可以检查并看到它如下所示：

<form class="YesNoStyles" id="makeUniqueID" novalidate="novalidate">
  <div class="form-group">
    <div class="af-radio-group" data-schema-key="answer">
      <div>
        <label>
          <input type="radio" value="Yes" name="answer" id="6gWEaAr2ZWQzqtj7H"> Yes</label>
      </div>
      <div>
        <label>
          <input type="radio" value="No" name="answer" id="6gWEaAr2ZWQzqtj7H"> No</label>
      </div>
    </div>
    <span class="help-block"></span>
  </div>
</form>

现在有两种选择：

1. 找到input[value="Yes"]和input[value="No"]元素，然后将css应用于其父元素。然而，这不能仅使用css来完成，因为css选择器不允许选择父元素。 Meteor的onRendered回调允许我们执行以下操作：

   Template.Question.onRendered(function(){
     $('input[value="Yes"]')[0].parentElement.classList.add('yes');
     $('input[value="No"]')[0].parentElement.classList.add('no');
   });
   

   使用以下定义的css类：

   .yes {
     background-color: green;
   }
   
   .no {
     background-color: red
   }
   

2. :nth-child(i) css选择器，无需javascript！

   定义以下css规则（从我上面添加的类开始）：

   .YesNoStyles > div > div > div:nth-child(1) > label  {
     background-color: green;
   }
   
   .YesNoStyles > div > div > div:nth-child(2) > label {
     background-color: red;
   }