2010-09-13 11 views
5

Tengo dos botones de opción y un menú desplegable como puede ver a continuación. Lo que quiero hacer es: 1. Mientras no esté marcado, oculte o gris en el cuadro desplegable, y 2. Mientras sí está marcado, muestre el cuadro desplegable.Deshabilitar el cuadro desplegable en el botón de radio haga clic en

¡Cualquier puntero sería apreciado!

<td colspan="4"> 
<input name="discount" type="radio" id="Yes" value="Yes" />Yes 
<input name="discount" type="radio" id="No" value="No" checked="checked" />No<br /> 
<select class="purple" name="discountselection" id="discountselection"> 
<option value="1 Year" selected="selected">1 Year</option> 
<option value="2 Years">2 Years</option> 
<option value="3 Years">3 Years</option> 
</select>     
</td> 

Respuesta

18
<script type="text/javascript"> 
        $("#Yes").click(function() { 
         $("#discountselection").attr("disabled", false); 
         //$("#discountselection").show(); //To Show the dropdown 
        }); 
        $("#No").click(function() { 
         $("#discountselection").attr("disabled", true); 
         //$("#discountselection").hide();//To hide the dropdown 
        }); 
    </script> 

Además, establece el estilo de visualización de la lista desplegable, o la propiedad discapacitados en HTML basado en el botón de radio seleccionado por defecto al cargar la página.

<select name="discountselection" id="discountselection" disabled="disabled"> 
    <option value="1 Year" selected="selected">1 Year</option> 
    <option value="2 Years">2 Years</option> 
    <option value="3 Years">3 Years</option> 
    </select> 
2

Es necesario configurar el mando a selectdisabled y utilizar un código similar a éste:

​$(function(){ 
    $('input:radio[name=discount]').one('change', function(){ 
     $('.purple').removeAttr('disabled'); 
    }); 
});​ 

Ver http://www.jsfiddle.net/A3BuQ/6/

Ref .: .one(), .removeAttr()

+0

Tengo otros botones de opción en la página. ¿Esto afectará ésos? – 109221793

+0

@TaraWalsh: sí, lo haría. Adapte el código para hacerlo más específico. – jAndy

+0

Genial, he colocado este código de javascript en la parte superior de mi documento HTML así: ¿Es esta la forma correcta de usar este código? En este momento no parece funcionar. – 109221793

3
$('input:radio[name="discount"]').change(function() { 
    if ($(this).val()=='Yes') { 
     $('#discountselection').attr('disabled',true); 
    } else 
     $('#discountselection').removeAttr('disabled'); 
});​ 

http://jsfiddle.net/uSmVD/

1

Se puede ocultar con jQuery:

$(document).ready(function(){  

$('#discountselection').hide(); 

     $('#No').click(function(){ 
      $('#discountselection').hide(); 
     }); 

     $('#Yes').click(function(){ 
      $('#discountselection').show(); 
     }); 
}); 

comprobarlo: http://www.jsfiddle.net/cFUsU/

ACTUALIZACIÓN: se ha añadido ready (documento) $(); método para iniciar establece este código a la acción cuando la página está listo

+0

Hola, ¿dónde debería insertar este javascript? Soy un poco novato en eso. – 109221793

+0

Usted puede poner esto dentro de una '

1
​$(function(){ 
    $('input:radio').bind('change', function(){ 
    $('#discountselection').attr('disabled', !$("#yes").is(":checked")); 
    }); 
});​ 
1

Sería esto lo haga?

$('input:radio').bind('change', function(){ 
    $('select').attr('disabled', $(this).val() == "No"); 
}); 

Probado, funciona genial. Buena suerte.

+0

esto es un problema. No eliminar el atributo 'disabled' podría ocasionar que algún navegador inhabilite el elemento, incluso cuando su valor sea 0 .En realidad, no importa qué valor establezca, siempre que el atributo 'disabled 'esté presente, un elemento debe deshabilitarse (w3c). – jAndy

Cuestiones relacionadas