eine Radio-Gruppe hängt von einem anderen für das Ergebnis

Question

ersten Beitrag .. Grafik Person wird ein Coder hier. (Codierung macht mehr Spaß, aber härter!)

2 Radiogruppen mit je 2 Tasten. Ich habe es funktioniert, wenn entweder #client oder #agent aus Radio 1 ausgewählt ist, und # companyClient aus Radio 2 ausgewählt ist, ist das Ergebnis, die Textfelder unter den Radiogruppen bleiben Readonly außer #companyName. Ich habe es auch funktioniert, wo, wenn # Agent von Radio 1 ausgewählt ist, und #individualClient von Radio 2 ausgewählt ist, das Ergebnis ist die Textfelder unterhalb der Radiogruppen bearbeitet werden können, um Eingabe zu sammeln außer #companyName, die Readonly bleibt.

Was ich brauche ist, wenn #client von Radio 1 ausgewählt ist und #individualClient von Radio 2 ausgewählt ist, bleiben die Textfelder unter den Radiogruppen (außer #companyName) Readonly; Zur Zeit sind sie editierbar, was ich nicht will. Und ich muss die Textfeldwerte von #firstnameContact, #lastnameContact und titleContact zu ihnen kopieren (dh zu firstnameClient, lastnameClient und titleClient).

Dank

JS

$(function(){ 
    $("#companyClient, #individualClient").change(function(){ 
     $("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").attr("readonly",true); 
     if($("#individualClient").is(":checked")){ 
      $("#firstnameClient, #lastnameClient, #titleClient").removeAttr("readonly"); 
      $("#companyName").attr("readonly"); 
      $("#firstnameClient").focus(); 
     } 
     else if($("#companyClient").is(":checked")){    
      $("#companyName").removeAttr("readonly"); 
      $("#companyName").focus(); 
     } 
    }); 
}); 

HTML

<label for="firstnameContact">First Name</label> 
<input type="text" name="firstnameContact" id="firstnameContact" /> 

<label for="lastnameContact">Last Name</label> 
<input type="text" name="lastnameContact" id="lastnameContact" /> 

<label for="titleContact">Title</label></div> 
<input type="text" name="titleContact" id="titleContact" /> 

<!--Radio 1 --> 
<label>Your Status</label> 
<input type="radio" name="yourStatus" id="client" value="client" checked /> 
<label for="client">I am the Client</label> 
<input type="radio" name="yourStatus" id="agent" value="agent" /> 
<label for="agent">I am an Agent</label></div> 

<!--Radio 2 --> 
<label>select one:</label> 
<input type="radio" name="clientType" id="companyClient" value="companyClient" /> 
<label for="companyClient">Company</label> 
<input type="radio" name="clientType" id="individualClient" value="individualClient" /> 
<label for="individualClient">Individual</label>  

<label for="companyName">Company Name</label> 
<input type="text" name="companyName" id="companyName" readonly /> 

<label for="firstnameClient">First Name</label></div> 
<input type="text" name="firstnameClient" id="firstnameClient" readonly /> 

<label for="lastnameClient">Last Name</label> 
<input type="text" name="lastnameClient" id="lastnameClient" readonly /> 

<label for="titleClient">Title</label></div> 
<input type="text" name="titleClient" id="titleClient" readonly /> 

Answer 1

hinzugefügt nur eine Form um alle Elemente und machte die Änderung auf sie scheint zu Werke.

See this fiddle

$(function(){ 
    $("form").change(function(){ 
     $("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").attr("readonly",true); 
     if($("#individualClient").is(":checked")){ 
      $("#firstnameClient, #lastnameClient, #titleClient").removeAttr("readonly"); 
      $("#companyName").attr("readonly"); 
      $("#firstnameClient").focus(); 
     } 
     else if($("#companyClient").is(":checked")){    
      $("#companyName").removeAttr("readonly"); 
      $("#companyName").focus(); 
     } 
    }); 
}); 

EDIT

Oder Sie disabled können es klar für die Nutzer zu machen.

See this fiddle

$(function(){ 
    $("form").change(function(){ 
     $("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").prop("disabled",true); 
     if($("#individualClient").is(":checked")){ 
      $("#firstnameClient, #lastnameClient, #titleClient").removeProp("disabled"); 
      $("#companyName").prop("disabled",true); 
      $("#firstnameClient").focus(); 
     } 
     else if($("#companyClient").is(":checked")){    
      $("#companyName").removeProp("disabled"); 
      $("#companyName").focus(); 
     } 
    }); 
}); 

Natürlich können Sie eine PHP-Validierung und Test aller Felder hinzuzufügen safier und besser zu machen.