one radio group depends on another for its outcome - html

Question

first post.. graphics person becoming a coder here. (Coding is more fun, but harder!)
2 radio groups each with 2 buttons. I have got it working where if either #client or #agent is selected from Radio 1, and #companyClient is selected from radio 2, the result is the text fields beneath the radio groups stay Readonly except #companyName. I also have it working where if #agent is selected from Radio 1, and #individualClient is selected from radio 2, the result is the text fields beneath the radio groups become editable to collect input except #companyName which stays Readonly.
What I need though is if #client is selected from Radio 1, and #individualClient is selected from radio 2, the text fields beneath the radio groups (except #companyName) stay Readonly; currently they are editable which I don't want. And I need to copy the text field values from #firstnameContact, #lastnameContact, and titleContact to them (ie to firstnameClient, lastnameClient and titleClient).
Thanks
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

Just added a form around all elements and made the change on it, seems to works.
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
Or you can use disabled to make it more clear for users.
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();
}
});
});
Of course, you can add a PHP validation and test of all fields to make it safier and better.