Aktivieren von text-Feldern auf der Grundlage radio-button-Auswahl

Im Grunde genommen habe ich zwei radio-Buttons 'ja' und 'Nein', und dann zwei weitere Eingabefelder ein. 

[LabelQuestion] [RadioYes][RadioNo]

If yes, then... [TextField1]
If no, then...  [TextField2]

Standardmäßig würde ich gerne text-Felder 1 und 2 inaktiv/nicht in der Lage, geben Sie in die Daten, bis Sie den entsprechenden radio-button ausgewählt wurde, und dann dieses Feld ist nur verfügbar für Daten-Eingabe.

Ich bin ein absoluter Anfänger, aber ich denke, das ist erreichbar durch die Verwendung von CSS und/oder JavaScript. Bitte beachten Sie ich habe weiter wissen, Kenntnisse in JavaScript, kann aber logisch alter-pre-bestehenden JS-code.

Mein Aktueller code sieht wie folgt aus:

 <div class='conlabel'>Have you started trading yet?</div>
      <table width="100">
              <tr>
                <td><label>
                  <input type="radio" name="example" value="Yes" id="example_0" required/>
                  Yes</label></td>
          </tr>
          <tr>
            <td><label>
              <input type="radio" name="example" value="No" id="example_1" required/>
              No</label></td>
          </tr>
  </table>
  <li>
      <div class='conlabel'>If Yes, then:</div>
          <input type="text" name="field1" placeholder="" />
  </li><br>
      <div class='conlabel'>If No, then:</div>
          <input type="text" name="field2" placeholder="" />
  </li><br>

InformationsquelleAutor Paul | 2013-03-19

  1. 4

    Wie über diese kleine Zahl:

    $(function(){
    $("#example_0, #example_1").change(function(){
        $("#field1, #field2").val("").attr("readonly",true);
        if($("#example_0").is(":checked")){
            $("#field1").removeAttr("readonly");
            $("#field1").focus();
        }
        else if($("#example_1").is(":checked")){
            $("#field2").removeAttr("readonly");
            $("#field2").focus();   
        }
    });
});

    Finden Sie eine JSFiddle hier.

    Bitte beachten Sie ich habe eine ID für beide <input> Felder. Lassen Sie mich wissen, wie es Messen.

    Wenn Sie lieber für die <input> Felder disabled eher als readonly, ersetzen Sie einfach readonly mit disabled überall. Ich persönlich denke, dass readonly ist schöner als das Betriebssystem zu machen scheint mehr der eigenen Wirkung auf Behinderte Eingänge.

    Den focus() natürlich nicht notwendig - Aber die kleinen Dinge machen einen großen Unterschied und ich bevorzuge es immer, wenn eine website bewegt sich mein cursor, wo es voraussichtlich für mich.

    Hi, das ist fantastisch. was zu sagen, der Benutzer " yes "auswählt und dann füllt Feld1, aber dann ändert Ihre Meinung noch mit den eingegebenen Daten in field1 wählt "Nein" statt und gibt info in Feld 2. gibt es eine Möglichkeit, die wir zurückstellen können das Feld, auf eine geänderte option?
    Hallo Paul, bitte siehe mein update. Die änderung der val("") - Funktion, die setzt die Feldwerte gleich nichts. Bitte akzeptieren Sie die Antwort, wenn Sie gefunden, was Sie gesucht (:
    Ich nehme an, es spielt keine Rolle, mit dem update. Aber Sie sollten disabled statt readonly da, dass die Daten übermittelt werden. Quelle
    wie ein Charme. was für ein Kerl. vielen Dank für Ihre Hilfe.
    Ein guter Punkt, danke dafür, dass es.

    InformationsquelleAutor George

  2. 1

    Könnten Sie http://jquery.com/ um dies zu tun:

    sind diese in den head der html:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    Ist und auch fügen Sie dieses javascript:

        <script type="text/javascript">
$(document).ready(function () {

function checkradiobox(){
    var radio = $("input[name='example']:checked").val();
    $('#field1, #field2').attr('disabled',true);
    if(radio == "Yes"){
        $('#field1').attr('disabled',false);
        $("#field1").focus();
    }else if(radio == "No"){
        $('#field2').attr('disabled',false);
        $("#field2").focus();
    }
}

$("#example_0, #example_1").change(function () {
    checkradiobox();
});

checkradiobox();

});   
</script>

    Überprüfen Sie die jsfiddle für ein Beispiel http://jsfiddle.net/KFgbg/3/

    Vielen Dank für Eure Hilfe Daniel

    InformationsquelleAutor Daniel

  3. 1

    Fügen Sie dieses javascript/jQuery, html-das sollte den trick tun:

    <script type="text/javascript">
    $(function () {
        //First add disabled properties to inputs
        $("input:text").prop('disabled', true);

        //Yes Input
        $("#example_0").on("click", function () {
            $("#input1").prop('disabled', false);
            $("#input2").prop('disabled', true);
        });

        //No Input
        $("#example_1").on("click", function () {
            $("#input2").prop('disabled', false);
            $("#input1").prop('disabled', true);
        });
    });
</script>

    Sehr basic, fügt nur eine onclick-Funktion für die einzelnen Eingänge und aktiviert oder deaktiviert die "deaktiviert" - Eigenschaft für die entsprechenden text-Eingabe. Sie müssen hinzufügen "#input1" und "#input2" ID ' s den text ein, der Benennung kann nach Wunsch offensichtlich.

    Vielen Dank für Ihre Hilfe!

    InformationsquelleAutor Danny Brady

  4. 0
    <div class='conlabel'>Have you started trading yet?</div>
  <table width="100">
          <tr>
            <td><label>
              <input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/>
              Yes</label></td>
      </tr>
      <tr>
        <td><label>
          <input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/>
          No</label></td>
      </tr>
</table>
<li>
  <div class='conlabel'>If Yes, then:</div>
      <input type="text" id="field1" name="field1" placeholder="" disabled="true" />
</li><br>
  <div class='conlabel'>If No, then:</div>
      <input type="text" id="field2" name="field2" placeholder="" disabled="true"  />

    gibt es viele Möglichkeiten, dies zu tun, aber Bearbeiten Sie Ihren code so wenig wie möglich, hier ist eine Möglichkeit:

    1. geben Sie Ihre Textfelder ID-Attribute sowie Namen
    2. deaktivieren per html-Attribut die beiden Textfelder starten
    3. onclick " ja " radio-button, aktivieren Feld1 und deaktivieren Feld2
    4. onclick "Nein" radio-button, deaktivieren Feld1 und aktivieren Feld2
    Vielen Dank für Eure Hilfe Joe!

    InformationsquelleAutor Joe Stein

  5. 0
    <script language="Javascript">


function hideA()


{

    document.getElementById("A").style.visibility="hidden";

    document.getElementById("B").style.visibility="visible";    

}



function hideB()
{
    document.getElementById("B").style.visibility="hidden";
    document.getElementById("A").style.visibility="visible";

}


</script>


    </head>

    <body>
        <form name="f1" method="post" action="">

        <table>

            <tr><th>catagory</th><th><input type="radio" name="cat"   value="seller" 
            onClick="hideB()">Seller


                    <input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th>  

</tr>
            <div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A">
                     Seller Name<input type='text' name='sname'><br>



          Seller Product<input type='text' name='sproduct'>
            </div>


            <div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B">
             Buyer Name<input type='text' name='bname'><br>

           Buy Product<input type='text' name='bproduct'>

            </div>


            </form>

    InformationsquelleAutor vidhya

Schreibe einen Kommentar