Disattiva casella a discesa sul pulsante di opzione fai clic su

Ho due pulsanti di opzione e una casella a discesa, come puoi vedere di seguito. Quello che voglio fare è: 1. Mentre nessun è selezionato, nascondere o disabilitare la casella a discesa e 2. Mentre Sì è selezionato, mostrare la casella a discesa.Disattiva casella a discesa sul pulsante di opzione fai clic su

Qualsiasi suggerimento sarebbe apprezzato!

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

fonte

2010-09-13 109221793

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

Inoltre, impostare lo stile di visualizzazione del menu a discesa, o la proprietà disabile in HTML in base al pulsante radio selezionato di default al caricamento della pagina.

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

fonte

2010-09-13 14:43:37

è necessario impostare il vostro controllo select-disabled e utilizzare un codice simile a questo:

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

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

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

fonte

2010-09-13 14:39:15 jAndy

Ho altri pulsanti di opzione nella pagina. Ciò influenzerà quelli? – 109221793

@TaraWalsh: sì, lo farebbe. Ho adattato il codice per renderlo più specifico. – jAndy

Cool, ho inserito questo codice javascript nella parte superiore del mio documento HTML in questo modo: È questo il modo corretto di utilizzare questo codice? In questo momento non sembra funzionare. – 109221793

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

http://jsfiddle.net/uSmVD/

fonte

2010-09-13 14:42:02 Robert

È possibile nascondere con jQuery:

$(document).ready(function(){  

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

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

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

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

UPDATE: aggiunti $ (document) .ready(); Metodo per iniziare impostare questo codice per l'azione quando la pagina è pronta

fonte

2010-09-13 14:42:40 d2burke

Ciao, dove dovrei inserire questo javascript? Sono un po 'newbie ad esso. – 109221793

Si può mettere questo all'interno di un '

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

fonte

2010-09-13 14:44:00 elektronikLexikon

sarebbe questo farlo?

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

Testato, funziona alla grande. In bocca al lupo.

fonte

2010-09-13 14:44:33 mkoistinen

questo è un problema, non rimuovendo l'attributo 'disabled' potrebbe caso qualche browser di disabilitare ancora l'elemento, anche quando il suo valore è 0 .In realtà non importa quale valore si imposta, purché sia presente l'attributo 'disabled', un elemento deve essere disabilitato (w3c). – jAndy

Problemi correlati

Disattiva casella a discesa sul pulsante di opzione fai clic su

risposta

Problemi correlati