Come deselezionare la casella di controllo a meno che non sia selezionato il pulsante di opzione?

Question

molto nuovo per javascript, ma qualsiasi aiuto per farmi iniziare sarebbe apprezzato. Ho una forma semplice:

<div><input type="radio" name="o1" id="burger" />Burger</div> 
<div id="yesFries"><input type="checkbox" name="e1" id="fries" />Fries with that?</div> 
<div><input type="radio" name="o1" id="pizza" />Pizza</div> 
<div><input type="radio" name="o1" id="hotdog" />Hot Dog</div> 

voglio la casella di controllo "Fries" in grigio a meno che non sia selezionato il pulsante di opzione "Burger". Non sono sicuro che Javascript o CSS siano il modo migliore per farlo. Grazie in anticipo!

Answer 1

Ho notato che non si specifica se o non è possibile utilizzare jQuery. Se questa è un'opzione, si prega di consultare uno degli altri post come lo consiglio vivamente.

Se non è possibile utilizzare jQuery quindi provare il seguente:

<script> 
    function setFries(){ 
    var el = document.getElementById("burger"); 
    if(el.checked) 
     document.getElementById("fries").disabled = false; 
    else 
    document.getElementById("fries").disabled = true;  
    } 
</script> 


<div><input type="radio" name="o1" id="burger" onchange="setFries();"/>Burger</div> 
<div id="yesFries"><input type="checkbox" name="e1" id="fries" disabled="disabled"/>Fries with that?</div> 
<div><input type="radio" name="o1" id="pizza" onchange="setFries();"/>Pizza</div> 
<div><input type="radio" name="o1" id="hotdog" onchange="setFries();"/>Hot Dog</div>​ 

Semplice esempio su jsFiddle

Answer 2

Se si utilizza jQuery, una libreria Javascript veramente facile da utilizzare (che consiglio vivamente per i principianti), è possibile farlo in due passaggi aggiungendo del codice a un tag script nella pagina contenente :

$(function(){ 
    $("#burger").change(function() { 
     if ($(this).is(':checked')) $("#fries").removeAttr("disabled"); 
     else $("#fries").attr("disabled", true); 
    }); 
}); 

Questo codice fa tre cose:

• gli ascolti per change eventi in #burger.
• Quando si verifica una modifica, eseguire l'function fornito.
• In questa funzione, impostare l'attributo disabled di #fries nella proprietà checked di #burger.

Answer 3

quello che vuoi fare è impostare gli elementi disabilitati, fino a quando lo stato della radio cambia, che sarebbe stato fatto con javascript, e quindi dovresti aggiungere/rimuovere la classe disabilitata nella onchange della radio pulsante.

Quali librerie javascript stai pensando di utilizzare? jQuery lo renderebbe abbastanza semplice.

$('#burger').change(function() { 
    if ($('#burger').checked()) { 
     $('#fries').removeClass('disabled'); 
    } else { 
     $('#fries').addClass('disabled'); 
    } 
}); 

Answer 4

utilizzare jQuery

 
$().ready(function() { 
    var toggleAskForFries = function() { 
    if($('#burger').is(':checked')) { 
     $('#yesFries').show() 
    else 
     $('#yesFries').hide() 
    } 
    return false 
    } 
    toggleAskForFries() 
    $('#burger').change(toggleAskForFries) 
} 

Answer 5

utilizzando jQuery: http://jsfiddle.net/kboucher/cMcP5/ (anche etichette aggiunto alle etichette)

Answer 6

È anzi provare questo senza alcuna libreria di funzioni

<input type="checkbox" name="e1" id="fries" disabled /> 

JS

window.onload=function(){ 
    var radios=document.getElementsByName('o1'); 
    for(i=0;i<radios.length;i++) radios[i].onclick=checkFire; 
}; 

function checkFire(e) 
{ 
    var fires=document.getElementById('fries'); 
    var evt=e||window.event; 
    var target=evt.target||evt.srcElement; 
    if(target.checked && target.id==='burger') fires.disabled=false; 
    else 
    { 
     fires.checked=false; 
     fires.disabled=true; 
    } 
} 

DEMO.

Answer 7

In realtà con un po 'di CSS3 puoi prendere in giro una soluzione semplicistica. Qui non escludiamo il pulsante, ma lo rendiamo visibile solo se la casella è selezionata. Ma potremmo anche escluderlo con un po 'di CSS in più su questo esempio. Dovrai sempre considerare quale tipo di supporto vuoi offrire. Ma se stai lavorando bene con i browser moderni, provalo.

Ecco il codice HTML

<label> 
    <input type="checkbox" name="test" /> 
    <span>I accept terms and cons</span><br><br> 
    <button>Great!</button> 
</label> 

Ecco il CSS

button { display: none} 
:checked ~ button { 
    font-style: italic; 
    color: green; 
    display: inherit; 
} 

Ed ecco la DEMO http://jsfiddle.net/DyjmM/