флажок jquery set установлен

274

Я уже пробовал все возможные способы, но я все еще не работал. У меня модальное окно с checkbox Я хочу, чтобы при открытии модальности проверка или снятие флажка checkbox должна основываться на значении базы данных. (У меня есть уже работающие с другими полями формы.) Я начал проверять его, но это не сработало.

Мой 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: хорошо, я действительно что-то пропустил здесь... Я могу проверить/снять флажок с помощью кода, если флажок находится на странице, но это в модальном окне, я не могу. Я пробовал десятки разных способов...

У меня есть ссылка, которая должна открыть модальную:

и jquery для "прослушивания" клика и выполнения некоторых операций, таких как заполнение некоторых текстовых полей данными, поступающими из базы данных. Все работает так, как я хочу, но проблема в том, что я не могу установить checkbox check/unchecked с помощью кода. помогите пожалуйста!

$(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 its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});
  • 0
    какой класс применяется к модальному div при открытии модального? Также, как вы проверяете значение базы данных - используя AJAX или оно уже предварительно извлечено и сохранено в переменной?
  • 0
    Установите флажок после загрузки модального окна. Я думаю, вы устанавливаете флажок перед загрузкой модального окна. $ ( '# FModal') модальный ( 'шоу'). $ ( "# Estado_cat") атр ( "проверено", "проверено").
Теги:
checkbox

15 ответов

526

вам нужно использовать функцию "prop":

.prop('checked', true);

Перед jQuery 1.6 (см. user2063626 ответ):

.attr('checked','checked')
  • 4
    Похоже, у вас правильный ответ. Не могли бы вы уточнить? stackoverflow.com/a/5876747/29182
  • 1
    Это хорошо знать. Не обращая на это внимания при просмотре документации по миграции в jQuery 3.3.x
Показать ещё 1 комментарий
56

Принимая все предложенные ответы и применяя их к моей ситуации - пытаясь проверить или снять флажок на основе полученного значения true (если нужно установить флажок) или false (не следует устанавливать флажок) - я пробовал все выше, и нашел, что использование правильных решений .prop( "checked", true) и .prop( "checked", false).

Я не могу добавлять комментарии или ответы еще, но я чувствовал, что это достаточно важно, чтобы добавить к разговору.

Вот длинный код для модификации полного календаря, который говорит, что если полученное значение "allDay" истинно, установите флажок с идентификатором "even_allday_yn":

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}
  • 43
    Почему не только на одной строке? $( "#even_allday_yn").prop('checked', allDay);
  • 1
    Он пытался продемонстрировать возможные значения. Как бы вы узнали реальную стоимость «allDay» без примера, подобного этому здесь?
Показать ещё 2 комментария
33

Чувак попробуй под кодом:

$("div.row-form input[type='checkbox']").attr('checked','checked')

ИЛИ

$("div.row-form #estado_cat").attr("checked","checked");

ИЛИ

$("div.row-form #estado_cat").attr("checked",true);
  • 3
    попробовал ... не работает ... :(
  • 21
    Как и в ответе KeyOfJ, используйте .prop('checked', true) вместо attr - я просто столкнулся с той же проблемой, и prop работает.
Показать ещё 4 комментария
16

Поскольку вы находитесь в модальном окне (будь то динамическое или на странице), вы можете использовать следующий код для достижения своей цели: (я столкнулся с той же проблемой на своем сайте, и именно так я ее исправил)

HTML:

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

CODE:

$.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. Если это так, я хочу включить флажок в окне, которое устанавливает этот атрибут, когда пользователь сохраняет из этого окна.

  • 4
    Следует отметить, что, хотя другие ответы на рассматриваемый вопрос могут «работать», использование prop как предполагает этот ответ, является ПРАВИЛЬНЫМ способом выполнения динамической проверки / снятия флажка jQuery.
11

"checked" атрибут "галочки" установите флажок, как только он появится. Чтобы проверить/снять флажок, вам нужно установить/отключить атрибут.

Для проверки флажка:

$('#myCheckbox').attr('checked', 'checked');

Для снятия флажка:

$('#myCheckbox').removeAttr('checked');

Для проверки проверенного состояния:

if ($('#myCheckbox').is(':checked'))

Надеюсь, что это поможет...

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

будет работать. Убедитесь, что true и false не входят в кавычки.

  • 0
    Attr не будет проверять флажок, проп, это тот, кто делает проверку. Как .prop('checked', true); Больше информации в этом посте
  • 0
    @casivaagustin Зависит от версии jQuery. Я считаю, что ранее, чем jQuery 1.6, .attr() работал, как описано.
4

Вы можете написать, как указано ниже.

HTML

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

JQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

Надеюсь, он сработает для вас.

3

Работал для меня:

$checkbok.prop({checked: true});
  • 0
    пользователь $ ("# estado_cat"). attr ("проверено", "проверено");
3
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Найти будет возвращать массив, поэтому используйте [0], чтобы получить, даже если есть только один элемент

если вы не используете find,

$("#subclip_checkbox").checked=true;

это отлично работало в Mozilla Firefox для меня

  • 1
    Это работает, все другие решения не будут обнаружены, если у вас есть: Check стиль в вашем CSS
2

Это происходит потому, что вы с новейшей версией jquery attr('checked') возвращаете 'checked', а prop('checked') возвращает true.

2

Это работает.

 $("div.row-form input[type='checkbox']").attr('checked','checked');
2

Вы пробовали использовать $("#estado_cat").checkboxradio("refresh") в своем флажке?

2

Попробуйте это, так как вы используете jQuery UI, вероятно (если не прокомментировать)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });
  • 0
    @ user2063626 - часть js внутри функции скопирована из вашего ответа
  • 0
    user1428716 - попробовал ... не работает ...
1

Установите флажок после загрузки модального окна. Я думаю, вы устанавливаете флажок перед загрузкой страницы.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
1

Я тоже столкнулся с этой проблемой.

и вот мой старый код не работает

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

вот мой новый код, который теперь работает:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

поэтому ключевой момент перед тем, как он сработает, убедитесь, что проверенное свойство существует и не удаляется.

  • 0
    Намного Jbookaccess.prop("checked", data.access != 'private'); : Jbookaccess.prop("checked", data.access != 'private');

Ещё вопросы

Сообщество Overcoder
Наверх
Меню