0

我有这个复选框：

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

这个按钮提交：

<input type="submit" id="commitChanges" name="commitChanges" value="Freigeben" tal:condition="python: not training['released'] "/>

全部在一个表格中。如果复选框的值无效，则在打开页面时它是红色的，而不仅仅是在按下按钮之后。有谁知道如何改变它？

编辑（额外信息）： 我不希望复选框为红色。我希望它正常，直到我按下“Wirksamkeit”按钮。如果复选框的值无效，它应该变成红色

编辑：

这是完整的代码：

<tr tal:define="effectiveness view/get_effectiveness">
    <td>
        <select name="effectiveness_helper" id="effectiveness_helper" style="display: none;">
            <option value="default">default</option>
            <option value="yes">yes</option>
            <option value="no">no</option>
        </select>
        <div>
          <input required type="checkbox" id="effectiveness" name="effectiveness">
          <label for="effectiveness">Wirksamkeit</label>
        </div>
        <script tal:condition="python: effectiveness['effectiveness'] == 2">
            $("#effectiveness").prop("indeterminate", true).prop("checked", false)
        </script>
        <script tal:condition="python: effectiveness['effectiveness'] == 1">
            $("#effectiveness").prop("checked", true)
        </script>
        <script tal:condition="python: effectiveness['effectiveness'] == 0">
            $("#effectiveness").removeProp('required').prop("checked", false)
        </script>
        <script tal:condition="python: not training['effectiveness_verification']">
            $("#effectiveness").removeProp('required');
        </script>
        <script tal:condition="python: training['released']">
            $("#effectiveness").removeProp('required').prop("disabled", "disabled");
        </script>
        <script>
            $("#effectiveness").change(function() {
                if (!$(this).is(":checked")) {
                    $(this).removeProp('required');
                }
            });
            let checkbox = document.getElementById("effectiveness");
            let dropdown = document.getElementById("effectiveness_helper");

            checkbox.addEventListener("change", (event) => {
                let checked = event.target.checked;
                dropdown.value = checked ? "yes" : "no";
            });
        </script>
    </td>
</tr>

这是一个下拉菜单，它可以像我想要的那样工作。只有在我单击按钮后，下拉菜单才会变红freigeben。

<tr tal:define="overall view/get_training">
    <td tal:content="overall/rating" tal:condition="python: training['released']"></td>
    <td tal:condition="python: not training['released']" id="rating" >
        <select required size="1" id="rating" name="rating">
            <option value=="">Bitte Auswählen</option>
            <option tal:define="rating overall/rating;" tal:repeat="rate python:view.get_all_training_evaluations(rating)"
                    tal:content="rate/text" tal:attributes="selected python:rate['selected']">
            </option>
        </select>
    </td>
</tr>

代码可能看起来有点奇怪，因为它是一个三态复选框，而第三个状态（默认）是唯一的无效状态。

我尝试使用普通的 2StateCheckbox 进行测试，它的工作方式与我预期的一样。我认为问题是，我将属性“检查”设置为假。（我认为是因为，如果我单击普通复选框并将值设置为无效（未选中），而不是将焦点设置到另一个元素，它也会变成红色）。但我仍然不知道如何解决这个问题。我已经尝试将焦点放在另一个元素上。在将 checked 属性设置为 false 之后，我还使用 jQuery 设置了属性（换句话说，首先是 $("#effectiveness").prop("checked", false); 和第二个 $("#effectiveness").prop('required ', true); 没有在 html 标签内设置所需的属性）。但没有任何效果。

4

2 回答 2

1

无法直接为复选框设置样式，但您可以将样式应用于标签。未选中所需复选框时，标签下方为红色。当复选框不是必需的时，不应用样式。

input:required:not(:checked) + label {
  background: red;
}
<div>
  <input required type="checkbox" id="required">
  <label for="required">Required</label>
  <input type="checkbox" id="notrequired">
  <label for="notrequired">Not required</label>
</div>

于 2020-07-14T12:06:43.477 回答
1

选中此项，您不能将样式应用于复选框，但您可以用新的完整 CSS 项目替换它们。

您应该将您的 html 更改为：

<label class="container">Wirksamkeit
  <input type="checkbox" id="effectiveness" name="effectiveness">
  <span class="checkbox"></span>
</label>

并添加一些 CSS，我已经为您完成了，请在此处查看。

基本上，您将隐藏原始复选框并创建一个全新的复选框，您可以在其上应用您想要的任何样式。

编辑：

我不希望复选框为红色。我希望它正常，直到我按下“Wirksamkeit”按钮。如果复选框的值无效，它应该变成红色 – Simon Rechermann

新代码，提交时更改，如果未选中复选框，则阻止表单提交。

于 2020-07-14T12:37:32.607 回答