根据另一个组的值设置一组单选按钮

时间:2017-07-14 17:11:34

标签: javascript html

我有几组是没有单选按钮

下面是用于在选中US Citizen单选按钮时尝试将Permanent Resident Alien单选按钮设置为false的jquery。我们已经确认var resAlien是正确的,并选择了正确的单选按钮,但是,当我们尝试将其设置为false时,它不会设置。有任何想法吗? 谢谢。

我正在使用Html.RadioButtonFor

  <form action="/Declarations" id="declarationsForm" method="post">
    <table width="100%" id="Ken Customer" style="border: thin solid gray">
     <tr>
                <td>Are you a U.S. citizen?</td>
                <td>
                    <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.USCitizen" class="National" data-val="true" data-val-required="The USCitizen field is required." id="rdoUSCitizen-816198" name="USCitizen" type="radio" value="True" /><label for="Yes">Yes</label>
                    <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.USCitizen" checked="checked" class="National" id="rdoUSCitizen-816198" name="USCitizen" type="radio" value="False" /><label for="No">No</label>
                </td>
            </tr>    
     <tr>
                <td>Are you a Permanent Resident Alien?</td>
                <td>
                    <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.PermanentResidentAlien" checked="checked" class="National" data-val="true" data-val-required="The PermanentResidentAlien field is required." id="rdoPermanentResidentAlien-816198" name="PermanentResidentAlien" type="radio" value="True" /><label for="Yes">Yes</label>
                    <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.PermanentResidentAlien" class="National" id="rdoPermanentResidentAlien-816198" name="PermanentResidentAlien" type="radio" value="False" /><label for="No">No</label>
                </td>
            </tr>
    </table>
    </form>

的jQuery

  $("#declarationsForm").on('click',
            '.National',
            function() {
                                var btnId = this.id;
                                var typeItem = btnId.substring(0, 3);
                                var dashIndex = btnId.indexOf("-");
                var ctrl = btnId.substring(3, dashIndex);
                var applicantId = btnId.substring(btnId.indexOf("-") + 1);

                var usCit = "rdoUSCitizen-" + applicantId;
                var forNat = "rdoForeignNat-" + applicantId;
                var resAlien = "rdoPermanentResidentAlien-" + applicantId;
                var btn = document.getElementById(btnId);



                      $("#" + resAlien)).prop('checked', false);                   

            });

1 个答案:

答案 0 :(得分:0)

你有2个问题。一个是语法问题:

$("#" + resAlien)).prop('checked', false);

这将失败,应该是:

$("#" + resAlien).prop('checked', false);

第二个问题是使用您的id属性。它们必须是独一无二的就像现在一样,你有:

<input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.PermanentResidentAlien" checked="checked" class="National" data-val="true" data-val-required="The PermanentResidentAlien field is required." id="rdoPermanentResidentAlien-816198" name="PermanentResidentAlien" type="radio" value="True" />
<label for="Yes">Yes</label>
<input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.PermanentResidentAlien" class="National" id="rdoPermanentResidentAlien-816198" name="PermanentResidentAlien" type="radio" value="False" />
<label for="No">No</label>

两个id元素的rdoPermanentResidentAlien-816198设置为input。您的脚本会有效地将checked设置为false。所以它会起作用,但它不合适。

我建议将所有元素id属性更新为唯一。这样,您可以根据需要将Yes更改为No,反之亦然。

我还注意到您的某些name元素有input个重复属性。提交表单时会产生不利影响。

以下是您可能需要考虑的示例:https://jsfiddle.net/Twisty/oowc613w/