时间戳

首页 > 解决方案 > 基于同一表行中另一个值的单选按钮选择状态

javascript - 基于同一表行中另一个值的单选按钮选择状态

问题描述

我有一种情况，我想通过表格中的复选框选择各种选项，同时通过单选按钮选项选择默认行。（把它想象成复选框中的整体权限，然后是单选框中的默认访问权限）用户可以在复选框选择中选择各种选项，然后对于那些选择的选项，他们可以选择主要的默认选择。如果一行的复选框未选中，那么他们应该无法选择该行上的该单选按钮。

在此处输入图像描述

查看图像，除非已选中该行中的复选框，否则不应单击（激活）第 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)。我想我现在需要的只是

if (checkBoxState == false) {
//do not select the radio button                    
}

因为选择单选按钮不是问题。当我需要解决的状态为假时，它不允许选择。

标签： javascriptjqueryhtml

解决方案

我想我现在需要的只是......

是的你是对的。为了避免单选按钮选择，您可以调用事件处理程序的.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>

推荐阅读