jQuery设置复选框选中

我已经尝试了所有可能的方法，但还是没有成功。我有一个模式窗口与复选框，我想当模式打开时，复选框勾选或取消勾选应该基于数据库值。(我已经与其他领域的人合作过了。)我开始试着去检查，但不管用。

我的HTML div:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

和jQuery:

$("#estado_cat").prop( "checked", true );

我也尝试了attr，以及在论坛上看到的其他工具，但似乎都不起作用。谁能告诉我怎么走?

EDIT

好吧，我真的遗漏了一些东西。如果复选框在页面中，我可以检查/取消检查使用代码，但它是在模态窗口中，我不能。我尝试了几十种不同的方法。

我有一个链接，应该打开模式:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

和jQuery“监听”点击和执行一些操作，如填充一些文本框的数据来自数据库。一切都像我想要的那样工作，但问题是我不能设置复选框选中/未选中使用代码。请帮助!

$(function () {
    $(".editButton").click(function () {
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "process.php",
            dataType: "json",
            data: {
                id: id,
                op: "edit"
            },
        }).done(function (data) {
            // The next two lines work fine,
            // i.e. it grabs the value from database and fills the textboxes
            $("#nome_categoria").val(data['nome_categoria']);
            $("#descricao_categoria").val(data['descricao_categoria']);

            // Then I tried to set the checkbox checked (because it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });

        evt.preventDefault();
        return false;
    });
});

当前回答

.attr("checked",true)
.attr("checked",false)

将工作。确保true和false不在引号内。

2014-06-26 14:59:10

其他回答

因为你是在一个模态窗口(无论是动态的还是在页面中)，你可以使用以下代码来实现你的目标:(我在我的网站上遇到了同样的问题，这是我如何修复它)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

代码:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

在上面的“kendoWindow”是我的窗口(我的是动态的，但我也这样做时，追加到一个元素直接在页面)。我正在遍历一个数据数组(“queriesToAddToGroup”)，以查看是否有任何行具有COPY属性。如果是这样，我想打开窗口内的复选框，当用户从该窗口保存时设置该属性。

2013-05-31 12:27:37

你必须使用'prop'函数:

.prop('checked', true);

在jQuery 1.6之前(参见user2063626的回答):

.attr('checked','checked')

2013-10-28 09:18:28

你试过在你的复选框上运行$("#estado_cat").checkboxradio("refresh")吗?

2013-09-25 18:53:24

<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

记住分别增加id和for属性。“动态添加引导”复选框。

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})

2020-06-05 12:05:47

出现这种情况是因为您使用最新版本的jquery attr('checked')返回'checked'，而prop('checked')返回true。

2014-01-03 01:33:21

jQuery设置复选框选中

推荐文章

最新文章

标签