标记需要的单选/复选框按钮

Question

我想在以下复选框中添加一些规则：

<form action="{% url 'payment' item.slug %}" method="POST">

    {% csrf_token %}
    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" required name="half_price" id='c01'  value="{{item.half_price}}" onclick="check(this);" style=" margin-top: 20px; "{% if item.half_price %} {% else %} disabled {% endif %} > Half: ₹ {{item.half_price}} /- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" required name="full_price" id='c02' value={{item.full_price}} onclick="check(this);" {% if item.full_price %} {% else %} disabled {% endif %}>  Full : ₹ {{item.full_price}} /- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">
 </form>

1. 如果我的其中一件商品未标记为半价，则该复选框将被禁用，并且网页将继续根据需要询问复选框。
2. 现在假设我从半价中删除“必需”并且我的产品有半价并且我选中半价复选框并单击“添加按钮”，它说全价是强制性的。
3. 如果我从两者中删除 required ，并且用户没有单击任何复选框并单击提交按钮，则我在后端没有任何价值。

值得注意的是，我有 jQuery ，其中将用户限制为仅 select 一个复选框。

Answer 1

您可以在输入单击时编写 function 以检查复选框验证（如果您不想更改 html）。

 var validateBeforePost = function(){ var chkCount = document.querySelectorAll('input.radioCheck[type="checkbox"]:checked'); if(chkCount.length == 0 || chkCount.length > 1 ){ alert('Select single valid price'); return false; } return true; } //check function check(){}

 <form> <label class="radio-inline"> <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01' value="{{item.half_price}}" onclick="check(this);" style=" margin-top: 20px; "> Half: ₹ {{item.half_price}} /- </h5> <span class="checkmark"></span> </label> <label class="radio-inline"> <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value={{item.full_price}} onclick="check(this);" > Full: ₹ {{item.full_price}} /- </h5> <span class="checkmark"></span> </label> <input style="margin-left: 10px;" type="submit" class="button" onclick="return validateBeforePost();" value="ADD"> </form>

Answer 2

为什么不只在half_price可用时才要求它。

<input type="checkbox" name="half_price" value="{{item.half_price}}"
  {% if item.half_price %} required {% else %}  disabled {% endif %} 
>

同样对于full_price

<input type="checkbox" name="full_price" value="{{item.full_price}}"
  {% if item.full_price %} required {% else %}  disabled {% endif %} 
>

编辑：

需要进行更改。

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="{{item.half_price}}" onclick="check(this);" style="margin-top: 20px;" {% if item.half_price %}required{% else %}disabled{% endif %} > Half: ₹ {{item.half_price}}/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value={{item.full_price}} onclick="check(this);" {% if item.full_price %}required{% else %}disabled{% endif %} >  Full : ₹ {{item.full_price}}/- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

---

有数据

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="40" onclick="check(this);" style="margin-top: 20px;" required > Half: ₹ 40/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value=80 onclick="check(this);" required >  Full : ₹ 80/- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

将翻译为

{
  item: {
    half_price: 40
  }
}

---

对于数据

{
  item: {}
}

将转化为

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="" onclick="check(this);" style="margin-top: 20px;" disabled > Half: ₹ /- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value= onclick="check(this);" disabled >  Full : ₹ /- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

---

对于数据

{ item: {} }

将翻译为

 <label class="radio-inline"> <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01' value="" onclick="check(this);" style="margin-top: 20px;" disabled > Half: ₹ /- </h5> <span class="checkmark"></span> </label> <label class="radio-inline"> <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value= onclick="check(this);" disabled > Full: ₹ /- </h5> <span class="checkmark"></span> </label> <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

---

更新：解决评论中的问题。 如果您只想要这些值，那么这些就是需要进行的更改。

 <label class="radio-inline"> <h5> <input type="radio" class="radioCheck" name="price" id='c01' value="{{item.half_price}}" onclick="check(this);" style="margin-top: 20px;" {% if item.half_price %}required{% else %}disabled{% endif %} > Half: ₹ {{item.half_price}}/- </h5> <span class="checkmark"></span> </label> <label class="radio-inline"> <h5> <input type="radio" class="radioCheck" name="price" id='c02' value={{item.full_price}} onclick="check(this);" {% if item.full_price %}required{% else %}disabled{% endif %} > Full: ₹ {{item.full_price}}/- </h5> <span class="checkmark"></span> </label> <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

---

对于数据

{ item: { "half_price": 80, "full_price": 160 } }

将翻译为

 <label class="radio-inline"> <h5> <input type="radio" class="radioCheck" name="price" id='c01' value="80" onclick="check(this);" style="margin-top: 20px;" required > Half: ₹ 80/- </h5> <span class="checkmark"></span> </label> <label class="radio-inline"> <h5> <input type="radio" class="radioCheck" name="price" id='c02' value=160 onclick="check(this);" required > Full: ₹ 160/- </h5> <span class="checkmark"></span> </label> <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

---

Answer 3

首先，您不应该要求 jQuery 一次选中一个复选框。 为两个复选框保持相同的“名称”属性将起作用。 当您保持复选框的名称属性相同时，将“已选中”属性添加到“全价”复选框，以便在页面加载时始终选中它。 如果您的条件没有禁用“半价”复选框，用户可以选择选中它。