标记需要的单选/复选框按钮
Posted
技术标签:
【中文标题】标记需要的单选/复选框按钮【英文标题】：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。 【参考方案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 一次选中一个复选框。为两个复选框保持相同的“名称”属性将起作用。 当您保持复选框的名称属性相同时，将“已选中”属性添加到“全价”复选框，以便在页面加载时始终选中它。如果您的条件没有禁用“半价”复选框，用户可以选择选中它。
【讨论】：
以上是关于标记需要的单选/复选框按钮的主要内容，如果未能解决你的问题，请参考以下文章