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


479

Я уже перепробовал все возможные способы, но все равно не заработал. У меня есть модальное окно с, 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, и другие видели здесь на форумах, но ни один, кажется, не работает. Может кто-нибудь указать мне правильный путь?

РЕДАКТИРОВАТЬ: хорошо, я действительно что-то здесь упускаю ... Я могу установить / снять флажок, используя код, если флажок на странице, но это в модальном окне, я не могу. Я перепробовал десятки разных способов ...

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

и 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 its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});

какой класс применяется к модальному div при открытии модального? Также, как вы проверяете значение базы данных - используя AJAX или оно уже предварительно извлечено и сохранено в переменной?
user1428716

Установите флажок после загрузки модального окна. Я думаю, вы устанавливаете флажок перед загрузкой модального окна. $ ( '# fModal') модальный ( 'шоу'). $ ( "# estado_cat") атр ( "проверено", "проверено").
Vineeth Bhaskaran

Ответы:


805

Вы должны использовать функцию «prop»:

.prop('checked', true);

До выпуска jQuery 1.6 (см . Ответ пользователя 2063626 ):

.attr('checked','checked')

5
Похоже, у вас правильный ответ. Не могли бы вы уточнить? stackoverflow.com/a/5876747/29182
Ziggy

1
Это хорошо знать. Это
упущено

1
Хорошо знать, что вы не можете использовать attr в более новых версиях jQuery, как я изначально думал
Калоян

75

Взяв все предложенные ответы и применив их к моей ситуации - пытаясь установить или снять флажок, основываясь на восстановленном значении true (следует установить флажок) или false (не устанавливать флажок) - я попробовал все вышеперечисленное и обнаружил, что с помощью .prop («проверил», true) и .prop («проверил», false ) было правильным решением.

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

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

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}

48
Почему не только на одной строке? $( "#even_allday_yn").prop('checked', allDay);
Ксавье Хайоз,

3
Он пытался продемонстрировать возможные значения. Как бы вы узнали реальную стоимость «allDay» без примера, подобного этому здесь?
Soroush Falahati

1
@ Ксавьер Хайоз. Это работает тогда и только тогда, когда allDay возвращает «true» или «false» в качестве буквального значения, а не чисто двоичного значения. Флажки плохо спроектированы в html, и их проверенный статус может быть выражен по-разному. Безопасный и единственный известный мне способ: allDay === 'true'? $ ('# even_allday_yn) .prop («проверено», true): $ (' # even_allday_yn) .prop («проверено», false). Обратите внимание на оператор строгого равенства.
Брайс Кустийяс

1
$('#even_allday_yn').prop('checked', allDay === true)будет работать, потому что allDay === trueдает логический результат.
leftclickben

58

Чувак попробуйте ниже код:

$("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);

26
Как и в ответе KeyOfJ, используйте .prop('checked', true)вместо attr- я просто столкнулся с той же проблемой, и propработает.
semmelbroesel

3
К вашему сведению, если вы хотите использовать :checkedпсевдо-селектор или другие встроенные функции HTML-флажка, вы должны использовать .prop.
Бенастан

1
Попробовал это, и это не сработало, но когда я изменил код на $ ("div.row-form #estado_cat"). Prop ("флажок", "проверен"); это сработало. (Изменено отношение атрибута к реквизиту).
Джим Эванс

1
К сожалению, prop - это jQuery 1.6 и выше, так что если вы застряли в устаревшей среде, которая не будет работать для вас
wolffer-east

.attr()это путь для более ранних версий, .prop()для jQuery 1.6+.
vapcguy

26

Атрибут «флажок» ставит галочку, как только он существует. Таким образом, чтобы установить / снять флажок, вы должны установить / снять атрибут.

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

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

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

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

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

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

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


19

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

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" - мое окно (мое динамическое, но я также делаю это при добавлении элемента непосредственно на странице). Я зацикливаюсь на массиве данных («queryToAddToGroup»), чтобы увидеть, есть ли у каких-либо строк атрибут COPY. Если это так, я хочу включить флажок в окне, которое устанавливает этот атрибут, когда пользователь сохраняет из этого окна.


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

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

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


1
Attr не будет проверять флажок, реквизит - тот, кто делает проверку. Нравится .prop('checked', true); Больше информации в этом сообщении
casivaagustin

@casivaagustin Зависит от версии jQuery. Я считаю, что раньше, чем jQuery 1.6, .attr()сделал, как описано.
vapcguy

5

Вы можете написать как приведенный ниже код.

HTML

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

JQuery

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

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


4

Если вы хотите использовать эту функцию для сценария GreaseMonkey для автоматической установки флажка на странице, имейте в виду, что простая установка свойства флажка может не вызвать связанное действие. В этом случае, «щелкнув» флажок, вероятно, будет (и установить свойство флажка также).

$("#id").click()

3
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

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

если вы не используете найти то

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

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


1
Это работает, все другие решения не будут обнаружены, если у вас есть: проверенный стиль в вашем css
bhappy


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');

    }
   });

@ user2063626 - часть js внутри функции скопирована из вашего ответа
user1428716

2

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



2

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

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

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)
}

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


Гораздо проще:Jbookaccess.prop("checked", data.access != 'private');
Легионар

2

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


2
<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>

это хорошо работает в Chrome и Firefox
Реза Ахлаги

1

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

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

1

Я знаю, что это требует решения Jquery, но я просто хотел бы отметить, что очень просто переключить это в простом javascript.

var element = document.getElementById("estado_cat");
element.checked = 1;

Это будет работать во всех текущих и будущих версиях.


0
<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>');
    }
})
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.