Да/Нет кнопка

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 не позволяют выбирать родительские элементы. 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; 
   }