Question

我发誓我看了看这里，并用各种不同的方式搜索我可以问这个问题，但没有一个答案可以解决我的简单问题。

我在同一页面上有结算表格和运送表格。

当您选中结算表单中的复选框时，它会停用发货表单，并在取消选中该复选框后启用它。

我得到了这个工作，但是一旦我取消选中并第二次选中该框，虽然addClass（'disabled'）是，但是不会添加禁用属性（.prop）。

感谢您的帮助。

这是我的HTML代码：

<div class="col_4">
    <fieldset>
        <legend>Billing Information</legend>

        <p>
            <input type="checkbox" id="sameasbilling">Ship to Same As Billing Address</input>
        </p>


        <label for="bfname">First Name</label>
        <input type="text" id="bfname" class="required" name="fname" minlength="2" />
        <label for="blname">Last Name</label>
        <input type="text" id="blname" class="required" name="lname" minlength="2" />
        <label for="baddress">Address</label>
        <input type="text" id="baddress" class="required" name="address" minlength="2" />
        <label for="baddress2">Suite/Apt #</label>
        <input type="text" id="baddress2" name="address2" />
        <label for="bcity">City</label>
        <input type="text" id="bcity" name="city" />
        <label for="bstate">State</label>
        <input type="text" id="bstate" name="state" minlength="2" />
        <label for="bzip">Zip</label>
        <input type="text" id="bzip" class="required" name="zip" minlength="5" />
    </fieldset>
</div>
<div class="col_4" id="shipping">
    <fieldset>
        <legend>Shipping Information</legend>
        <br>
        <br>
        <label for="fname">First Name</label>
        <input type="text" id="fname" class="required" name="fname" minlength="2" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" class="required " name="lname" minlength="2" />
        <label for="address">Address</label>
        <input type="text" id="address" class="required" name="address" minlength="2" />
        <label for="address2">Suite/Apt #</label>
        <input type="text" id="address2" name="address2" />
        <label for="city">City</label>
        <input type="text" id="city" name="city" />
        <label for="state">State</label>
        <input type="text" id="state" name="state" minlength="2" />
        <label for="zip">Zip</label>
        <input type="text" id="zip" class="required" name="zip" minlength="5" />
    </fieldset>
</div>
<div class="right">
    <button class="pop orange">Send the order!</button>
</div>
</form>
</div>

这是我的JQuery：

<script>
$(document).ready(function () {
    $('#sameasbilling').change(function () {
        if ($('#sameasbilling').is(':checked')) {
            $('#shipping :input').addClass('disabled').prop('disabled', true);
            console.log('checked');
        } else {
            $('#shipping :input').removeClass('disabled').removeProp('disabled');
            console.log('unchecked');
        }
    });
})
</script>

Answer 1

尝试prop('disabled',false);

尝试这是以下工作代码：

$(document).ready(function () {
    $('#sameasbilling').click(function () {
        if ($('#sameasbilling').is(':checked')) {
            $('#shipping input').addClass('disabled').prop('disabled', true);
            console.log('checked');
        } else {
            $('#shipping input').removeClass('disabled').prop('disabled', false);
            console.log('unchecked');
        }
    });
})

Fiddle

Jquery使用复选框启用/禁用表单

1 个答案: