Wie Grau aus checkbox, es sei denn, radio-button ausgewählt ist?

sehr mit javascript, aber keine Hilfe zu bekommen, mich begonnen würde geschätzt werden. Ich habe ein einfaches Formular:

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

Möchte ich die "Pommes Frites" checkbox ausgegraut, es sei denn, der "Burger" radio-button ausgewählt ist. Ich bin mir nicht sicher, ob Javascript oder CSS ist der beste Weg, es zu tun. Vielen Dank im Voraus!

  • Aber ich will einfach nur Pommes Frites. 🙁
InformationsquelleAutor Rich701 | 2012-10-02
  1. 2

    Habe ich bemerkt, dass Sie nicht angeben, ob oder nicht, können Sie jQuery verwenden. Wenn das ist eine option, bitte finden Sie in den anderen posts, da ich es sehr empfehlen.

    Wenn Sie nicht verwenden, jquery, dann versuchen Sie die folgende:

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

    Einfaches Beispiel auf jsFiddle

    • Danke, das ist genau das was ich brauchte! Ich scheine, besser zu lernen, Kommissionierung durch funktionierenden code.
    • Sie sind sehr willkommen und ich bin froh, dass es geholfen hat =)
    • Sollten Sie die Antwort in Jquery für diejenigen von uns, die verwenden es auch.
    • Es gibt auch andere Antworten hier zeigen, dass eine ähnliche Funktionalität mit jQuery. Angesichts der OP ausdrücklich gebeten, für eine JavaScript-Lösung, diese Antwort ist ausreichend. Ich wäre mehr als glücklich, Ihnen zu helfen tun dies in jQuery wenn Sie Probleme haben, obwohl. Ich gebe zu - im Rückblick auf diese würde ich nicht verwenden, inline-event-Handler. Die Idee ist die gleiche, aber bitte Veranstaltung verbindlich / delegation, wenn Sie das tun...
    InformationsquelleAutor Chase
  2. 3

    was Sie tun möchten ist, legen Sie die Elemente deaktiviert, bis der Zustand der radio-änderungen, würd das mit javascript gemacht werden, und dann würden Sie hinzufügen/entfernen Behinderte Klasse in das onchange des radio-button.

    Was sind javascript-Bibliotheken, die Sie in Betracht ziehen? jQuery würde das ziemlich einfach.

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

    Eigentlich mit ein bisschen CSS3 können Sie mock-up ist eine sehr einfache Lösung.
    Hier haben wir nicht Grau der Taste aus, aber Sie machen es nur sichtbar, wenn die checkbox aktiviert ist.
    Aber, wir könnten auch Grau mit ein bisschen mehr CSS auf dieses Beispiel.
    Sie haben immer zu prüfen, welche Art von Unterstützung Sie anbieten wollen.
    Aber wenn man gut mit ihm arbeiten auf modernen Browsern, nur, es zu gehen.

    Hier ist der HTML -

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

    Hier ist der CSS -

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

    Und hier ist die DEMO http://jsfiddle.net/DyjmM/

    InformationsquelleAutor 2682562
  4. 2

    Wenn Sie jQuery, eine wirklich einfach zu bedienende Javascript-Bibliothek (die ich würde empfehlen, für Anfänger), können Sie dies in zwei Schritten, indem Sie einige code, um eine script - tag in Ihrer Seite mit:

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

    Dieser code macht drei Dinge:

    • Hört change Veranstaltungen auf #burger.
    • Wenn eine änderung Auftritt, führen Sie die mitgelieferte function.
    • In dieser Funktion legen Sie die disabled Attribut #fries zu den checked Eigenschaft von #burger.
    InformationsquelleAutor Peter Sobot
  5. 0

    JQuery 

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

    InformationsquelleAutor ilan berci
  6. 0

    Verwendung von jQuery: http://jsfiddle.net/kboucher/cMcP5/ (Auch Hinzugefügt Etiketten, um Ihre Etiketten)

    InformationsquelleAutor Kevin Boucher
  7. 0

    Sie ja versuchen, diese ohne Funktion-Bibliothek

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

    InformationsquelleAutor The Alpha
Schreibe einen Kommentar