State of Radio Button selection based on another value in same table row

Question

I have a situation where I want to select various options through check-boxes in a table and at the same time select a default row with through a radio button option. (think of it like overall permissions in checkbox, then the default accessed permission in radio box) User can select various options in the checkbox selection, and for those selected options they can then select a main default selection. If a row has its checkbox unchecked then they should not be able to select that radio button on that row.

Looking at the image, one should not be able to click (activate) radio button in row 2 (shop 2) unless checkbox in that row has been selected.

My html for the above image is as follows

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

Current attempt on Javascript to detect state of checkbox in that row when you click radio-button is as follows

$(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                    
    }
  });

});

So far I a can rightly get the status of the checkbox (true/false) on alert(checkBoxState). I suppose all I need at this point is

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

because selecting the radio button isnt a problem. Its not allowing that selection when state is false that I need to solve.

Answer 1

I suppose all I need at this point is....

Yes, you are right. In order to avoid radio button selection you can call the .preventDefault() method of event handler.

In any case pay attention to duplicated IDs when you generate the table (i.e.: 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>