1つのラジオグループは、その結果のために別のものに依存します

Question

最初の投稿はグラフィックスの人になっています。 （コーディングはもっと楽しいですが、もっと難しいです！）

2つのラジオボタンがそれぞれ2つあります。 #clientまたは#agentがラジオ1から選択され、#companyClientがラジオ2から選択された場合、ラジオグループの下にあるテキストフィールドは#companyName以外の読み取り専用のままです。ラジオ1から＃エージェントが選択され、ラジオ2から#individualClientが選択された場合、ラジオグループの下にあるテキストフィールドは、Readonlyのままの#companyName以外の入力を収集するよう編集可能になります。

#clientがラジオ1から選択され、#individualClientがラジオ2から選択され、ラジオグループの下にあるテキストフィールド（#companyNameを除く）がReadonlyのままである必要があります。現在、私は望んでいない編集可能です。そして、#firstnameContact、#lastnameContact、およびtitleContactのテキストフィールド値をそれらに（つまり、firstnameClient、lastnameClientおよびtitleClientに）コピーする必要があります。

おかげ

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

ちょうどすべての要素の周りにフォームを追加し、それに変更を加え、作品に思えます。

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

それとも、ユーザーのためにそれをより明確にするためにdisabledを使用することができます。もちろん

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(); 
     } 
    }); 
}); 

、あなたはそれがSAFIERとより良くするために、すべてのフィールドのPHPの検証とテストを追加することができます。