jQuery - 使用按鈕禁用和啓用表單元素

Question

嘿，所有，在此先感謝您的幫助。 這是我的代碼：

$(document).ready(function() { 
    $("#showexistingcust").button().click(function() { 
     $('#newcust :input').attr('disabled', 'disabled'); 
     $('#newcust :select').attr('disabled', 'disabled'); 
     $('#existingcust :input').removeAttr('disabled'); 
     $('#existingcust :select').removeAttr('disabled'); 
    }) 

    $("#showaddcust").button().click(function() { 
     $('#existingcust :input').attr('disabled', 'disabled'); 
     $('#existingcust :select').attr('disabled', 'disabled'); 
     $('#newcust :input').removeAttr('disabled'); 
     $('#newcust :select').removeAttr('disabled'); 
    }) 
}); 

我很新jQuery的，所以我可能會丟失一些基本的東西。但是這似乎有一些奇怪的行爲。根據我如何訂購代碼，removeAttr函數根本不運行，或者只在一個按鈕/ div上工作。

我不知道爲什麼這樣，任何人都可以擺脫一些光？

編輯：HTML：

<div id="newcust"> 
<label for="surname" class="left">Surname</label> 
<input type="text" name="surname" id="s_name" class="required" /><br /> 

<label for="p_name" class="left">Personal Name</label> 

<input type="text" name="p_name" id="p_name" class="required"/> <br /> 

<label for="m_phone" class="left">Mobile Phone</label> 
<input type="text" name="m_phone" id="m_phone" class="digits"/> <br /> 

<label for="h_phone" class="left">Home Phone</label> 
<input type="text" name="h_phone" id="h_phone" class="digits"/> <br /> 

<label for="w_phone" class="left">Work Phone</label> 
<input type="text" name="w_phone" id="w_phone" class="digits"/> <br /> 

<label for="email" class="left">Email Addresss</label> 
<input type="text" name="email" id="email" class="email" /> <br /> 

<label for="address1" class="left">Addresss</label> 
<input type="text" name="address1" id="address1"/> <br /> 

<label for="address2" class="blank">Address</label> 
<input type="text" name="address2" id="address2" class="required"/> <br /> 

<label for="suburb" class="left">Suburb</label> 
<input type="text" name="suburb" id="suburb" class="required"/> 
<br /> 

<label for="postcode" class="left">Postcode</label> 
<input type="text" name="postcode" id="postcode" class="digits required" maxlength="4"/> <br /> 

<label for="state" class="left">State</label> 
<input type="text" name="state" id="state" class="required" maxlength="3"/> <br /> 

<label for="paytype" class="left">Prefered Payment Type</label> 
<select name="paytype" class="required"> 
<option value="cash">Cash</option> 
<option value="credit">Credit Card</option> 
</select> <br /> 
<label for="promo" class="left">Promotional Material</label>  
<input type="checkbox" name="promo" value="1" /><br /> 
</div> 

<div id="existingcust"> 
<label for="searchc">Search</label> 
<input type="text" name="searchc" id="searchc_box" class='searchc_box'/> 
<input type="submit" value="Search" class="searchc_button" id="searchc_button" /> <br /> 
<label for="c">Results</label> 
<select name="custlist" id="custlist" class="required"> 
</select> 
</div> 

Answer 1

您可以通過select元素省略行動對此進行簡化，:input選擇匹配select以及input，textarea和button元素。嘗試從處理程序返回false以防止它採取默認操作（我假設這些錨定標記被製作爲按鈕）。

$(document).ready(function() { 
    $("#showexistingcust").button().click(function() { 
     $('#newcust :input').attr('disabled', 'disabled'); 
     $('#existingcust :input').removeAttr('disabled'); 
     return false; 
    }) 

    $("#showaddcust").button().click(function() { 
     $('#existingcust :input').attr('disabled', 'disabled'); 
     $('#newcust :input').removeAttr('disabled'); 
     return false; 
    }) 
});