Question

我有一个设计和样式的复选框：

<div class='checkbox'>
    <label for="test">
    <div class="switch">
        <input type="checkbox" name='test' id='test' value="1"/>
        <div class="slider"></div>
    </div>
    </label>
</div>

当用户点击复选框时，我会调用外部网页并获取返回值。如果值<= 0，那么我需要停止选中复选框。

这个Jquery我使用它并不起作用..

$("body").on('change', '#test', function(){
    var check = $(this).attr('id')
    if (document.getElementById(check).checked) {
        $.ajax({ type: "GET",   
            url: "do.php?mode=check=" + check,   
            async: true,
            success : function(text) {
            console.log (text)
            if (text === '0') 
                $('#test').attr('checked', false);
            }   
        });
    }
})

FIDDLE

如何更新带样式的复选框，以便取消选中它并在屏幕上显示为未选中状态？

由于

Answer 1

从jquery 1.6开始，不推荐使用$(element).attr()函数。您应该使用$("#test").prop("checked",false)代替。

来自jquery documentation：

从jQuery 1.6开始，.attr（）方法为尚未设置的属性返回undefined。要检索和更改DOM属性（如表单元素的已选中，已选择或已禁用状态），请使用.prop（）方法。

Answer 2

使用disabled属性。

<input type="checkbox" name='test' id='test' value="1" disabled />

这会禁用未选中的复选框。如果您希望让用户再次检查，您可以使用JavaScript将其删除。但在你的情况下，我会使用手动jQuery检查。

默认情况下禁用，然后在用户点击它时立即通过ajax请求。之后，执行以下操作：

if(callback =< 0) { $('#checkbox').prop('checked', true) }

有关已停用here的更多信息

复选框，不允许检查它

2 个答案: