在复选框单击时清理我的jQuery代码
Clean up my jQuery code on checkbox click
我正在对工作申请进行一些表单验证,并在元素未正确填写时添加一个类。我下面有一些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)
一样简单。
相关文章:
- 我的jQuery插件参数没有正确启动,遇到了问题
- 我的jquery代码不起作用.为什么?
- 我的jquery中出现NaN错误
- 我如何才能找到哪些网站使用我的jQuery插件
- 如何使用我的Jquery代码创建委托事件侦听器
- 为什么我的jQuery点击函数没有触发
- 我的jQuery加载请求是否被调用了两次
- 为什么我的Jquery.ajax调用会触发错误事件
- 如何触发我的 jquery 表单提交
- 为什么我的jQuery .每次迭代都无法使用每个项目的属性
- 为什么我的jQuery UI对话框不起作用
- 在我的 jquery 函数中得到一个错误
- 我的jQuery UI对话框没有'如果前面没有警告,则不会打开
- 我的jquery在本地工作,但当它'it’s上传到我的网站上,它只起部分作用
- 我的jquery日历没有正确对齐
- 与我的jquery弹出窗口和自动调整文本区域大小有冲突
- 关于我的jQuery脚本+与iDevices的兼容性的建议
- 我的jquery方法没有'不起作用
- 我的jquery代码在谷歌chrome控制台中工作,而不是在保存它之后
- 为什么当我快速移动鼠标时,我的jQuery会崩溃