jQuery - 使用按钮禁用和启用表单元素

时间:2010-10-30 14:02:21

标签: jquery javascript

嘿所有,提前感谢您的帮助。 这是我的代码:

$(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>

1 个答案:

答案 0 :(得分:1)

您可以通过省略select元素上的操作,:input选择器匹配select以及inputtextarea和{{{{}}来简化此操作。 1}}元素。尝试从处理程序返回false以防止它采取默认操作(我假设这些是锚标记被制作成按钮)。

button