[英]State of Radio Button selection based on another value in same table row
我有一种情况,我想通过表格中的复选框选择各种选项,并同时通过单选按钮选项选择默认行。 (可以将其看作是复选框中的总体权限,然后是单选框中的默认访问权限)。用户可以在复选框选择中选择各种选项,然后对于这些选择的选项,他们可以选择一个主要的默认选择。 如果某行的复选框未选中,则他们将不能选择该行上的单选按钮。
在查看图像时,除非选中该行中的复选框,否则应该不能单击(激活)第2行(商店2)中的单选按钮。
我上面的图片的HTML如下
<table class="table shopListTable">
<tr>
<th>@Html.DisplayName("Shop Name")</th>
<th>@Html.DisplayName("Allowed")</th>
<th>@Html.DisplayName("Default")</th>
</tr>
@foreach (var item in @ViewBag.ShopList)
{
<tr>
<td>
@item.q_name
</td>
<td>
<input class="checkBox" type="checkbox" id="shopAllowed" name="shopAllowed" value="@item.q_guid" />
@item.q_guid
</td>
<td>
<input class="radioButton" type="radio" id="shopDefault" name="shopDefault" value="@item.q_guid" />
</td>
</tr>
}
</table>
单击单选按钮时,当前尝试使用Javascript检测该行中复选框状态的尝试如下
$(document).ready(function () {
$('input[type=radio]').click(function () {
//var radioButtonValue = this.value;
var row = $(this).closest('tr');
var checkBoxState = row.find('.checkBox').is(":checked");
alert(checkBoxState)
if (checkBoxState == true) {
//allow selection of radion button
}
else {
//do not allow
}
});
});
到目前为止,我可以正确地获取alert(checkBoxState)
上复选框的状态(是/ alert(checkBoxState)
。 我想我现在需要的是
if (checkBoxState == false) {
//do not select the radio button
}
因为选择单选按钮不是问题。 当我需要解决的状态为false时,不允许选择。
我想现在我需要的是...
是的,你是对的。 为了避免选择单选按钮,可以调用事件处理程序的.preventDefault()方法。
无论如何,在生成表时都要注意重复的ID(即:id =“ shopAllowed” ...)
$(':radio').on('click', function (e) { var row = $(this).closest('tr'); var checkBoxState = row.find('.checkBox').is(":checked"); if (checkBoxState == false) { e.preventDefault(); } });
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table shopListTable"> <tr> <th>Shop Name</th> <th>Allowed</th> <th>Default</th> </tr> <tr> <td> name </td> <td> <input class="checkBox" type="checkbox" id="shopAllowed1" name="shopAllowed" value="guid" /> guid </td> <td> <input class="radioButton" type="radio" id="shopDefault2" name="shopDefault" value="guid" /> </td> </tr> <tr> <td> name </td> <td> <input class="checkBox" type="checkbox" id="shopAllowed3" name="shopAllowed" value="guid" /> guid </td> <td> <input class="radioButton" type="radio" id="shopDefault4" name="shopDefault" value="guid" /> </td> </tr> <tr> <td> name </td> <td> <input class="checkBox" type="checkbox" id="shopAllowed5" name="shopAllowed" value="guid" /> guid </td> <td> <input class="radioButton" type="radio" id="shopDefault6" name="shopDefault" value="guid" /> </td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.