是/否按钮

Question

我正在使用自动表单来询问是或否问题，我想要两个按钮，一个表示是，另一个表示否。通过使用 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

首先让我们添加一个 class 属性自动表单：

{{#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>

现在有两种选择：

找到 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 classes:
```
.yes {
  background-color: green;
}

.no {
  background-color: red
}
```

:nth-child(i) css 选择器，不需要 javascript！

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

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

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

是/否按钮

Yes / No button

meteor

meteor-autoform