Флажок 3 состояния требуется = истина, но установленный и снятый флажки действительны. Промежуточный должен быть недействительным

Question

У меня есть этот флажок с 3 состояниями:

<div>
    <input required type="checkbox" id="effectiveness" name="effectiveness">
</div> 

, и в начале значение установлено как промежуточное с jQuery, например:

$("#effectiveness").prop("indeterminate", true);

Требуемый атрибут проверяет, если проверенный атрибут истинен. Но я хочу, чтобы значения checked = "true" и checked = "false" были действительными. Единственное недопустимое состояние должно быть неопределенным.

Как я могу этого добиться?

Answer 1

О indeterminate, вот краткая заметка от CSS Уловки:

Неопределенное состояние только визуально. Флажок по-прежнему либо установлен, либо не отмечен как состояние. Это означает, что визуальное неопределенное состояние маскирует реальное значение флажка, так что это лучше будет иметь смысл в вашем пользовательском интерфейсе! Как и сами флажки, неопределенное состояние выглядит по-разному в разных браузерах.

Я не думаю, что для indeterminate поддерживается какой-либо браузер. Поскольку вы добавляете его самостоятельно через jQuery, почему бы не проверить и его?

Удалите атрибут required из своего HTML и замените код, когда effectiveness равно 2 на:

$("#effectiveness").prop("indeterminate", true).prop("checked", false).attr("required", "true").on('change', function() {
    $(this).removeAttr('required');
});

Приведенный выше код фактически заставит браузер его рассматривать invalid.

Answer 2

У меня все еще есть проблема сделать непроверенное состояние (не неопределенное) действительным. Я пробовал:

<script tal:condition="python: effectiveness['effectiveness'] == 0">
      $("#effectiveness").removeProp('required').prop("checked", false);
</script>

, но это работает только в том случае, если значение флажка уже не отмечено флажком, соответственно, эффективность ['fficiency '] == 0 перед открытием страницы. Когда состояние было отмечено (1) или неопределенным (2), и я переключаю состояния, щелкая по флажку, непроверенное состояние недействительно.

Answer 3

Полный код здесь:

                                <tr tal:define="effectiveness view/get_effectiveness">
                                        <td tal:condition="python: training['released']">
                                               <div>
                                                  <input type="checkbox" id="effectiveness" name="effectiveness" ng-checked="effectiveness/effectiveness == 1" disabled="disabled" >
                                                  <label for="effectiveness">Wirksamkeit</label>
                                                </div>
                                                <script tal:condition="python: effectiveness['effectiveness'] == 2">
                                                    $("#effectiveness").prop("indeterminate", true);
                                                </script>
                                        </td>
                                        <td tal:condition="python: not training['released']">
                                                <div>
                                                  <input required type="checkbox" id="effectiveness" name="effectiveness" ng-checked="effectiveness/effectiveness == 1" >
                                                  <label for="effectiveness">Wirksamkeit</label>
                                                </div>
                                                <script tal:condition="python: effectiveness['effectiveness'] == 2">
                                                    $("#effectiveness").prop("indeterminate", true);
                                                </script>
                                                <script tal:condition="python: effectiveness['effectiveness'] == 1">
                                                    $("#effectiveness").prop("checked", true);
                                                </script>
                                                <script tal:condition="python: effectiveness['effectiveness'] == 0">
                                                    $("#effectiveness").prop("checked", false);
                                                </script>
                                        </td>
                                </tr>