Question

第一篇文章..图形人在这里成为一名程序员。（编码更有趣，但更难！）

2个无线电组，每组有2个按钮。如果从Radio 1中选择了#client或#agent，并且从radio 2中选择了#companyClient，那么我可以使用它，结果是无线电组下面的文本字段保持Readonly，除了#companyName。如果从Radio 1中选择了#agent，并且从radio 2中选择了#individualClient，那么我也可以使用它，结果是无线电组下面的文本字段变得可编辑以收集输入，除了保留Readonly的#companyName。

我需要的是，如果从Radio 1中选择了#client，并且从radio 2中选择了#individualClient，则无线电组下面的文本字段（#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();   
        }
    });
});

修改

或者您可以使用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(); } }); });

当然，您可以添加PHP验证并测试所有字段，以使其更安全，更好。

一个广播组依赖于另一个广播组的结果

1 个答案: