Radyo düğmesi seçili değilken nasıl onay kutusu gri renkte seçilir?

Question

javascript için çok yeni, ama bana başlamak için herhangi bir yardım takdir edilecektir.

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

ben "Burger" radyo düğmesi seçildiğinde sürece "Fries" Onay kutusu gri renkte istiyorum: Ben basit bir form var. Javascript veya CSS'nin bunu yapmanın en iyi yolu olup olmadığından emin değilim. Şimdiden teşekkürler!

Answer 1

Seni kullanabilirsiniz olsun veya olmasın belirtmeyen fark ettik (Ayrıca etiket etiket eklendi) jQuery. Bu bir seçenekse, lütfen önerdiğim diğer yayınlardan birine bakın. Sonra aşağıdakileri deneyin jquery kullanamıyorsanız

: jsFiddle

Answer 2

jQuery, gerçekten kullanımı kolay bir Javascript kitaplığı (yeni başlayanlar için son derece tavsiye ederim) kullanıyorsanız, sayfanızda bir script etiketine kod ekleyerek bunu iki adımda yapabilirsiniz. : #burger üzerine change olaylar için

• dinler:

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

  Bu kod üç şey yapar.

• Bir değişiklik olduğunda, sağlanan function'u yürütün.
• Bu işlevde, #burger'un checked özelliğine #friesdisabled özniteliğini ayarlayın.

Answer 3

Ne yapmak istediğiniz, radyo durumu değişinceye kadar, javascript ile yapılan değişiklikleri devre dışı bırakıp, ardından devre dışı bırakılmış sınıfı radyodaki değişime eklemeniz/kaldırmanızdır. buton.

Hangi javascript kütüphanelerini kullanmayı düşünüyorsunuz? jQuery bunu oldukça basit yapardı.

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

Answer 4

kullanım JQuery jQuery kullanarak

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

Answer 5

: http://jsfiddle.net/kboucher/cMcP5/

Answer 6

üzerinde

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

Basit bir örnek herhangi bir fonksiyon kütüphanesine

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

JS

olmadan bu deneyin teki öncü

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

Aslında biraz CSS3 ile çok basit bir çözüme ulaşabilirsiniz. Burada düğmeyi gri göstermiyoruz, ancak onay kutusu işaretliyse görünür hale getiriyorsunuz. Ancak, bu örnekte biraz daha fazla CSS ile de bozulabiliriz. Ne tür bir destek sunmak istediğinizi düşünmeniz gerekir. Ama eğer modern tarayıcılarda çalışıyorsanız, sadece bir adım atın.

İşte Burada HTML

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

CSS

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

var Ve burada demo http://jsfiddle.net/DyjmM/