How can I place a modal on a button when no record is selected from my table. I am using bootstrap 4

Question

<table id="resultTable" class="table table-hover table-bordered table-sm">
  <thead>
    <tr>
      <th>Select</th>
      <th>Message Id</th>
      <th>Service</th>
      <th>Date</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>
        <div class="radio">
          <input type="radio" name="selectRow"/>
        </div>
      </td>
      <td>SomeId001</td>
      <td>SERVICE1</td>
      <td>2019/02/04</td>
    <tr>
  </tbody>
</table>

<br/>

<button id="proceedBtn" type="button" class="btn btn-light">Proceed</button>

$('#proceedBtn').click(function(){
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

So I what I want is for a message to be displayed, either in a modal or an alert whenever a user tries to utilise the proceed button, but no record from the table has been selected. If a record is selected from the table, the user can use the button, but the button should have no functionality until a record has been selected. Once a record has been selected the proceed button will execute the above javascript. I have been trying to find an example, but as I am not very familiar with javascript and bootstrap, I have not found an example that suits me.

Answer 1

I don't know if I did correctly understood your requirements, but possibly something like this could fit...:

$('#proceedBtn').click(function(){
  var selectRowElement = document.getElementsByName('selectRow');
  if (selectRowElement.checked) {
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
  } else {
    alert('Please select a row before proceeding');
  }
});