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

【问题标题】：Mark radio/checkbox buttons required标记需要的单选/复选框按钮
【发布时间】：2021-06-02 08:27:09
【问题描述】：

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

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

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

值得注意的是，我有 jQuery，其中限制用户只能选择一个复选框。

【问题讨论】：

为什么你的输入被包裹在标题标签中？为什么您的输入包含在标签标签内？此标记处于另一个级别...
如果可以的话尽量避免与 HTML 冲突，听起来你真的想要一个radio button group。

标签： javascript php html jquery forms

【解决方案1】：

您可以在输入点击时编写一个函数来检查您的复选框验证（如果您不想更改您的 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>

【讨论】：

谢谢，这应该对我有用。谢谢，我真的很感激先生。并感谢您很好地理解我的问题。

【解决方案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">

有数据

{
  item: {
    half_price: 40,
    full_price: 80 
  }
}

会翻译成

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

将转换为

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

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

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

【讨论】：

如果商品有半价和全价，那么先生？这两个复选框都是必需的。
如果两者都存在，则需要为两者启用
@faijanmemon 编辑后的答案是否解决了您的问题？
还不确定先生，如果我只想在我的购物车中添加半个呢？它也会问我完整的，对吗？？
我希望一次只添加一个项目，并且需要使其成为必需的 b'caz 我在后端获取这些值，如果用户不选择任何值，那么我会面对有一个错误，所以我必须使它成为必需，以便在他选择之后只有他才能走得更远，

【解决方案3】：

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

【讨论】：