2013-09-30 10 views
35

Nel caso # 1, nel caso # 2 non funziona. Controllare il codice sotto:Pulsante di opzione Bootstrap "checked" flag

<div class="container"> 
    <div class="row"> 
     <h1>Radio Group #1</h1> 
     <label class="radio-inline"> 
      <input name="radioGroup" id="radio1" value="option1" type="radio"> 1 
     </label> 
     <label class="radio-inline"> 
      <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2 
     </label> 
     <label class="radio-inline"> 
      <input name="radioGroup" id="radio3" value="option3" type="radio"> 3 
     </label> 
    </div> 
    <div class="row"> 
     <h1>Radio Group #2</h1> 
     <label for="year" class="control-label input-group">Year</label> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-default"> 
       <input name="year" value="2011" type="radio">2011 
      </label> 
      <label class="btn btn-default"> 
       <input name="year" value="2012" type="radio">2012 
      </label> 
      <label class="btn btn-default"> 
       <input name="year" value="2013" checked="checked" type="radio">2013 
      </label> 
     </div> 
    </div> 
</div> 

Potete vederlo in azione qui: http://bootply.com/84165

+1

Che cosa non funziona? – Trevor

risposta

69

Supponendo che si desidera un pulsante di default controllato.

<div class="row"> 
    <h1>Radio Group #2</h1> 
    <label for="year" class="control-label input-group">Year</label> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input type="radio" name="year" value="2011">2011 
     </label> 
     <label class="btn btn-default"> 
      <input type="radio" name="year" value="2012">2012 
     </label> 
     <label class="btn btn-default active"> 
      <input type="radio" name="year" value="2013" checked="">2013 
     </label> 
    </div> 
    </div> 

aggiungere la classe active al pulsante (label tag) che si desidera in default e checked="" per il suo cartellino di input in modo che viene presentata sotto forma di default.

+0

Grazie a @Trevor. Il pulsante è ora controllato, ma quando invio il modulo, non lo capisce come verificato. Se faccio clic manualmente nelle altre opzioni senza 'attivo', l'invio può comprendere il valore. Con 2013 attivo, se clicco nel 2011, per esempio, e clicco di nuovo nel 2013 e invio il modulo funziona. Hai qualche ideia? Grazie ancora. – Khrys

+1

Assomiglia a questo: http://stackoverflow.com/questions/11462434/twitter-bootstrap-radio-buttons-not-working – Khrys

+0

Oh, in tal caso prova ad aggiungere anche l'opzione 'checked =" "' all'elemento di input. Aggiornerò la mia risposta – Trevor

14

Una correzione javascript per applicare la classe 'attiva' per tutte le etichette che sono genitori di ingressi controllato:

$(':input:checked').parent('.btn').addClass('active'); 

inserto subito dopo

$('.btn').button(); 
+0

Se hai problemi con i pulsanti che non vengono evidenziati dopo aver premuto "Indietro", questo frammento di JavaScript lo corregge. Grazie, @rawrkats. –

+1

Mi piace questa soluzione, ma ho usato '$ (". Btn-group "). Find (': input: checked'). Parent ('. Btn'). AddClass ('active');' così che esegue un tocco più veloce su pagine che non hanno nessuno di questi. –

1

Utilizzare attiva classe con etichetta per farlo selezionare automaticamente e utilizzare checked="".

<label class="btn btn-primary active" value="regular" style="width:47%"> 
    <input type="radio" name="service" checked="" > Regular </label> 
    <label class="btn btn-primary " value="express" style="width:46%"> 
    <input type="radio" name="service"> Express </label> 
1

È necessario utilizzare l'etichetta attiva per farlo funzionare come indicato sopra. Ma puoi usare checked = "checked" e funzionerà anche. Non è necessario ma è più leggibile e ha più senso in quanto è più conforme al formato html.

Problemi correlati