2013-10-11 16 views
0

我正在做一些工作應用程序的表單驗證和添加一個類,當一個元素沒有正確填寫。如果申請人檢查「不自我識別」複選框,我在下面有一些html和jQuery,它將從一組特定的元素中移除該類。我無法找到一個更簡潔的參考跨度的方法。我還在「不自我識別」複選框中觸發了「onclick」事件的一部分,該複選框禁用了我將該類從中刪除的相同元素。在那部分代碼中,您會看到一些註釋掉的行,在我參考跨度時失敗了。任何幫助都是極好的!提前致謝。清理我的jQuery代碼複選框點擊

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..... 
+1

使用jQuery的'removeClass()'。 DOM遍歷在jQuery中也很容易,不妨堅持下去。 –

+0

jsfiddle這個,請。這很麻煩。 – Overcode

+0

我強烈建議閱讀jQuery的選擇器並學習如何使用它們。看到這裏的一些基本知識:http://www.w3schools.com/cssref/css_selectors.asp這是非常混亂的代碼,並且如果你學會使用它們,它會被清除很多。 – khalid13

回答

0

快速和骯髒的:給你想禁用所有的複選框絕不自identifocation條件一個類如identity-checkbox。那麼你想要的jQuery就像$(".identity-checkbox").attr("disabled",true)一樣簡單。