¿Cómo atenuar la casilla de verificación a menos que se seleccione el botón de opción?

Question

muy nuevo en javascript, pero cualquier ayuda para comenzar sería apreciada. Tengo una forma sencilla:

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

quiero la casilla de verificación "patatas fritas" atenuado a menos que se seleccione el botón de radio "hamburguesa". No estoy seguro si Javascript o CSS es la mejor manera de hacerlo. ¡Gracias por adelantado!

Answer 1

me he dado cuenta de que no especifica si o no se puede utilizar jQuery. Si esa es una opción, consulte una de las otras publicaciones, ya que la recomiendo encarecidamente.

Si no puede utilizar jQuery continuación, intente lo siguiente:

<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>​ 

ejemplo simple en jsFiddle

Answer 2

Si está utilizando jQuery, una biblioteca Javascript realmente fácil de usar (que recomendaría mucho para principiantes), puede hacerlo en dos pasos agregando un código a la etiqueta script en su página que contiene :

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

Este código hace tres cosas:

• escuchas change eventos en #burger.
• Cuando se produce un cambio, ejecute el function proporcionado.
• En esa función, establezca el atributo disabled de #fries en la propiedad checked de #burger.

Answer 3

lo que quiere hacer es desactivar los elementos, hasta que cambie el estado de la radio, eso se haría con javascript, y luego agregaría/eliminaría la clase deshabilitada en el cambio de la radio botón.

¿Qué bibliotecas Javascript está considerando utilizar? jQuery lo haría bastante simple.

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

Answer 4

usar jQuery

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

Answer 5

Usando jQuery: http://jsfiddle.net/kboucher/cMcP5/ (también etiquetas en sus etiquetas)

Answer 6

Usted nay intenta esto sin ninguna biblioteca de funciones

<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

En realidad, con un poco de CSS3 puedes simular una solución muy simple. Aquí no gris el botón, pero lo hace visible solo si la casilla de verificación está marcada. Pero, también podríamos ponerlo gris con un poco más de CSS sobre este ejemplo. Siempre tendrá que considerar qué tipo de soporte desea ofrecer. Pero si está de acuerdo con que funcione en navegadores modernos, solo pruébalo.

Aquí está el HTML

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

Aquí está la CSS

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

y aquí está la DEMO http://jsfiddle.net/DyjmM/