jQuery-使用按钮禁用和启用表单元素 [英] jQuery - Disabling and Enabling Form Elements with Buttons

问题描述

大家好，在此先感谢您的帮助. 这是我的代码:

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

我对jquery还是很陌生，所以我可能缺少一些基本知识.但这似乎有些奇怪的行为.根据我对代码的订购方式，removeAttr函数要么根本不运行，要么仅按一个按钮/div工作.

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?

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>

推荐答案

您可以通过省略对select元素(

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

这篇关于jQuery-使用按钮禁用和启用表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！