jQuery - Disabling and Enabling Form Elements with Buttons

Question

Hey all, thanks in advance for the help. This is my 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');
    })
});

I'm pretty new to jquery, so I might be missing something basic. But this seems to have some odd behavior. Depending on how I order to the code, the removeAttr functions either dont run at all, or just work on one button/div.

I have no idea why this is so, anybody able to shed some light?

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

You can simplify this by omitting the actions on select elements, the :input selector matches select as well as input, textarea, and button elements. Try returning false from the handler to prevent it from taking the default action (I assume these are anchor tags being made into buttons).

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