0

我正在对工作申请进行一些表单验证，并在未正确填写元素时添加一个类。如果申请人选中“不自我识别”复选框，我下面有一些 html 和 jQuery 将从一组特定的元素中删除该类。我很难找到一种更简洁的方式来引用跨度。我还包括了我在“不自我识别”复选框上触发的“onclick”事件的一部分，该复选框禁用了我从中删除类的相同元素。在该部分代码中，您将看到一些注释掉的行，其中我未能成功引用跨度。任何帮助都是极好的！提前致谢。

HTML：

<tr class="TrLight">
    <td colspan="2" valign="top">
        <table>
            <tr class="TrLight" id="areYouHispanic">
                <td width="55%" valign="top"><b>1. Are you Hispanic or Latino?</b> A person of Cuban, Mexican, Chicano/a, Puerto Rican, South or Central American, or other Spanish culture or origin, regardless of race.
                </td>
                <td width="45%" valign="top" class="LeftSidePadding">
                    <span id="AAI_Hispanic_Span">
                        <input type="radio" name="AAI_Hispanic" id="hispanicLatinoYes" onClick="disableRace('hispanicLatinoYes')" value="Yes"></input>
                        <label for="hispanicLatinoYes">Yes (Skip to question #3)<br /></label>
                        <input type="radio" name="AAI_Hispanic" id="hispanicLatinoNo" onClick="disableRace('hispanicLatinoYes')" value="No"></input>
                        <label for="hispanicLatinoNo">No (Go to question #2)</label>
                    </span>
                </td>
            </tr>
        </table>
    </td>
</tr>

<tr class="IdentificationWhatRace" id="whatRace">
    <td colspan="2" valign="top"><b>2. What race or races do you consider yourself to be? (Check all that apply)</b><br /><br />
        <span class="formCheckbox" id="AAI_Race_Span">
            <input type="checkbox" name="AAI_White" id="AAI_White" value="Yes"></input>
            <label for="AAI_White"><b>White:</b> a person having origins in any of the original peoples of Europe, the Middle East, or North Africa<br /></label>
            <input type="checkbox" name="AAI_Black" id="AAI_Black" value="Yes"></input>
            <label for="AAI_Black"><b>Black or African American:</b> a person having origins in any of the black racial groups of Africa<br /></label>
            <input type="checkbox" name="AAI_PacificIslander" id="AAI_PacificIslander" value="Yes"></input>
            <label for="AAI_PacificIslander"><b>Native Hawaiian or other Pacific Islander:</b> a person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands<br /></label>
            <input type="checkbox" name="AAI_Asian" id="AAI_Asian" value="Yes"></input>
            <label for="AAI_Asian"><b>Asian:</b> a person having origins in any of the original peoples of the Far East, Southeast Asia, or the Indian subcontinent including, for example, Cambodia, China, India, Japan, Korea, Malaysia, Pakistan, the Philippine Islands, Thailand, and Vietnam<br /></label>
            <input type="checkbox" name="AAI_AmericanIndianAlaskanNative" id="AAI_AmericanIndianAlaskanNative" value="Yes"></input>
            <label for="AAI_AmericanIndianAlaskanNative"><b>American Indian or Alaskan Native:</b> a person having origins in any of the original peoples of North and South America (including Central America), and who maintains tribal affiliation or community attachment</label>
        </span>
    </td>
</tr>

<tr class="TrLight" id="whatGender">
    <td valign="top">
        <b>3. What is your gender?</b>
    </td>
    <td valign="top">
        <span id="AAI_Gender_span">
            <input type="radio" name="gender" id="whatGenderMale" value="Male">
            <label for="whatGenderMale">Male <br /></label>
            <input type="radio" name="gender" id="whatGenderFemale" value="Female">
            <label for="whatGenderFemale">Female</label>
        </span>
    </td>    
</tr>

<tr class="TrDark">
    <td colspan="2" valign="top">
        <label>
            <input type="checkbox" name="noSelfIdentify" id="noSelfIdentify" value="Yes" onClick="disableIdentification('noSelfIdentify')">I do not wish to Self-Identify</input>
        </label>
    </td>
</tr>

JS：

jQuery('#noSelfIdentify').click(function(){
    jQuery(this.parentNode.parentNode.parentNode.parentNode.children[93].children[0].children[0].children[0].children[0].children[1]).removeClass("campuri-necesare");
    jQuery(this.parentNode.parentNode.parentNode.parentNode.children[94].children[0].children[3]).removeClass("campuri-necesare");
    jQuery(this.parentNode.parentNode.parentNode.parentNode.children[95].children[1]).removeClass("campuri-necesare");
});

单击禁用 JS：

function disableIdentification(xRadioButton) {
if (document.getElementById(xRadioButton).checked){


    // jQuery('#AAI_White').parentNode.classList.remove("campuri-necesare");
    // document.getElementById('AAI_Hispanic_Span').classList.remove("campuri-necesare");
    // document.getElementById('AAI_Race_Span').classList.remove("campuri-necesare");
    // document.getElementById('AAI_Gender_span').classList.remove("campuri-necesare");

    document.getElementById('whatGender').disabled=true;
    document.getElementById('whatGenderMale').disabled=true;
    document.getElementById('whatGenderFemale').disabled=true;
    document.getElementById('whatRace').disabled=true;
    document.getElementById('AAI_White').disabled = true;
    document.getElementById('AAI_Black').disabled = true;
    document.getElementById('AAI_PacificIslander').disabled = true;
    etc etc etc.....
4

1 回答 1

0

快速而肮脏：为您希望通过没有自我识别条件禁用的所有复选框提供一个类，例如identity-checkbox. 那么你想要的 jquery 就像$(".identity-checkbox").attr("disabled",true).

于 2013-10-11T16:22:18.777 回答