Question

我有一个复杂的jQuery表单，如果选中某个复选框，我想禁用多个表单元素。我正在使用jQuery 1.3.2，以及所有相关的插件。我在这做错了什么？谢谢，达科他州

这是我的HTML：

    <li id="form-item-15" class="form-item">
        <div class='element-container'>
            <select id="house_year_built" name="house_year_built" class="form-select" >
                 ...Bunch of options...
            </select>
            <input type="text" title="Original Purchase Price" id="house_purchase_price" name="house_purchase_price" class="form-text money" />
            <input type="text" title="Current Home Debt" id="house_current_debt" name="house_current_debt" class="form-text money" />
        </div>
        <span class="element-toggle">
            <input type="checkbox" id="house_toggle" />
            <span>Do not own house</span>
        </span>
    </li>

这是我的jQuery：

$('.element-toggle input').change(function () { 
    if ($(this).is(':checked')) $(this).parents('div.element-container').children('input,select').attr('disabled', true);
    else $(this).parents('div.element-container').children('input,select').removeAttr('disabled'); });

Answer 1

只是一个小问题：因为jquery 1.6你不应该使用总是正确的$(this).attr('checked')，而是使用$(this).prop('checked')。

建议您使用$(this).prop('disabled')（以测试该元素是否已停用）和$(this).prop('disabled', newState)而不是attr。

Answer 2

有一些事情应该改变。首先，实际的HTML结构与您在JavaScript中查询的内容（特别是parents()调用）不匹配。其次，绑定到click事件将在IE中提供更好的支持，因为IE有时会等待触发change事件，直到元素失去焦点。

$('.element-toggle input').bind('click', function () {
    var inputs = $(this).closest('li.form-item').find('div.element-container').children('input,select');

    if ($(this).attr('checked')) {
        inputs.attr('disabled', true);
    } else {
        inputs.removeAttr('disabled');
    }
});

Answer 3

这很有帮助。如果有人正在寻找插件，请转到：http://s.technabled.com/jquery-foggle

Answer 4

<div class='element-container'>不是$('.element-toggle input')的父级，是您的示例

选中复选框时，jQuery禁用表单元素

4 个答案: