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

Question

I would like to add some rules to the following checkboxes:

<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. If one of my items isn't marked as half price, the checkbox is disabled and webpage will continue to ask for checkbox as it is required.
2. now suppose I remove 'required' from half price and my product has half price and I check the half-price checkbox and click on "add button", it says full price is mandatory.
3. If I remove required from both, and user doesn't click on any checkbox and clicks on submit button, I get no value in the backend.

Of note, I have jQuery in which restricts the user to only select one checkbox.

Answer 1

You can write a function on input click to check you checkbox validation (If you don't want to change your 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

Why not make it required only if the half_price is available.

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

Similarly for full_price

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

EDIT:

Changes need to be done.

    <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">

---

With data

    <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">

Will translate to

{
  item: {
    half_price: 40
  }
}

---

For Data

{
  item: {}
}

will translate to

    <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">

---

For Data

{ item: {} }

Will translate to

 <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">

---

UPDATE: Resolving the question in comments. If you only want the values, then these are the changes need to be done.

 <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">

---

For Data

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

Will translate to

 <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

First of, you shouldn't require jQuery to keep one checkbox selected at a time. Keeping same 'name' attribute for both of the checkboxes will work. When you keep the name attr same for the checkboxes then add 'checked' attribute to your 'Full Price' checbox so that on page load it is always selected. User will have option to check the 'Half Price' checkbox if it was not disabled by your condition.