在复选框单击时清理我的jQuery代码

Clean up my jQuery code on checkbox click

本文关键字:我的 jQuery 代码 复选框 单击      更新时间:2023-09-26

我正在对工作申请进行一些表单验证,并在元素未正确填写时添加一个类。我下面有一些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.....

快速而肮脏:为您想要禁用的所有复选框(如 identity-checkbox .那么你想要的jquery就像$(".identity-checkbox").attr("disabled",true)一样简单。