Почему jQuery не видит, чтобы флажок был автоматически установлен?

Question

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

    $ (function(){
        var requiredCheckboxes = $('.options :checkbox[required]');
        requiredCheckboxes.change(function(){
            if(requiredCheckboxes.is(':checked')) {
                requiredCheckboxes.removeAttr('required');
            } else {
                requiredCheckboxes.attr('required', 'required');
            }
        });
    });

Что мне нужно для этого сделать, если флажок уже установлен, он удаляет обязательный атрибут. Почему это не работает, когда переменная публикуется на странице и PHP добавляет флажок = "проверен" к входным данным?

Спасибо!

Answer 1

HTML:

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

ЯШ:

$("document").ready(function(){
$('body').find('input:checkbox').prop('checked', "checked");
});

jsfiddle

Answer 2

Вы должны использовать this в качестве селектора при проверке, отмечен ли установленный флажок или нет. this относится к установленному флажку. Вы можете использовать prop() для добавления и удаления required

var requiredCheckboxes = $('.options');

requiredCheckboxes.change(function() {
  if ($(this).is(':checked')) {
    $(this).prop('required', false);
  } else {
    $(this).prop('required', true);
  }
});

input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>

---

Обновление: Вы можете использовать класс для необходимого флажка и использовать prop() для добавления и удаления свойства required.

var requiredCheckboxes = $('.required-options')

//On page Loads
if (requiredCheckboxes.is(':checked')) {
  requiredCheckboxes.prop('required', false);
} else {
  requiredCheckboxes.prop('required', true);
}


//Event listener
requiredCheckboxes.change(function() {
  if (requiredCheckboxes.is(':checked')) {
    requiredCheckboxes.prop('required', false);
  } else {
    requiredCheckboxes.prop('required', true);
  }
});

input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='required-options' type="checkbox" required checked>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>