jQuery - Désactivation et activation des éléments de formulaire avec des boutons

Question

Salut à tous, merci d'avance pour votre aide. Voici mon code:

$(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'); 
    }) 
}); 

Je suis assez nouveau pour jquery, donc je pourrais manquer quelque chose de base. Mais cela semble avoir un comportement étrange. En fonction de la façon dont je commande le code, les fonctions removeAttr ne fonctionnent pas du tout, ou ne fonctionnent que sur un bouton/div.

Je ne sais pas pourquoi c'est ainsi, quelqu'un peut-il jeter de la lumière?

EDIT: Le 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

Vous pouvez simplifier en supprimant les actions sur select éléments, le sélecteur :input correspond select ainsi que input, textarea et button éléments. Essayez de retourner false à partir du gestionnaire pour l'empêcher de prendre l'action par défaut (je suppose que ce sont des balises d'ancrage en boutons).

$(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; 
    }) 
});