Refresh radio button without jquery ui

Question

TL;DR; how to properly implement $('#radioBtn').checkboxradio("refresh"); without the jquery ui library?

I'm working on a project and need the radio buttons to be unselectable + clicking on a table row acting like clicking the radio button.

I'm facing the issue that the radio buttons have to be refreshed after setting the checked/not checked attribute. How do I do this without relying on jquery ui? Interestingly, if you call any function (that does not exist) on the radio button it gets refreshed.

NOTE: I'm asking about updating the radio button view to show the correct check state, not setting the checked state of the radio.

https://jsfiddle.net/8uno2ybf/5/

$(function() {
  var inputClickHandler = function() {
    var previousValue = $(this).attr('previousValue');
    var name = $(this).attr('name');

    if (previousValue == 'checked') {
      $(this).prop('checked', false);
      $(this).attr('previousValue', false);
      $(this).checkboxradio("refresh"); //This refreshes it for some reason
    } else {
      $("input[name=" + name + "]:radio").attr('previousValue', false);
      $(this).attr('previousValue', 'checked');
    }
  };

  $("input[type='radio']").click(inputClickHandler);

  $('.monitored_table tbody tr').click(function(event) {
    if (event.target.type !== 'radio') {
      $(':radio', this).trigger("click");
    }
  });

  console.log("OnLoad");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="monitored_table">
  <tr>
    <td>Text1</td>
    <td>
      <input type="radio" name="group1" value="1">
    </td>
  </tr>
  <tr>
    <td>Text2</td>
    <td>
      <input type="radio" name="group1" value="2">
    </td>
  </tr>
  <tr>
    <td>Text3</td>
    <td>
      <input type="radio" name="group1" value="3">
    </td>
  </tr>
</table>

Possible duplicate of https://stackoverflow.com/questions/9476617/how-to-set-radio-button-status-with-javascript — twoleggedhorse, Jul 02 '17 at 21:30
Possible duplicate of [How to set radio button status with JavaScript](https://stackoverflow.com/questions/9476617/how-to-set-radio-button-status-with-javascript) — twoleggedhorse, Jul 02 '17 at 21:30
@twoleggedhorse It's not, I'm asking about refreshing the radio button view, not setting the checked status. — Dan, Jul 02 '17 at 21:50

score 0 · Answer 1 · answered Jul 02 '17 at 21:36

0

You don't need Jquery UI for this purpose, Jquery is enough. However; you are trying to execute an inexistent function which breaks the flow of your code. You should check whether the function exists or not by using this function. Therefore; once the javascript code fails refresh is possible in your code blocks

answered Jul 02 '17 at 21:36

ali

1,301
10
12

Executing the non existent function makes the code work, which is why I'm asking for the proper way to do this. – Dan Jul 02 '17 at 22:22

Refresh radio button without jquery ui

1 Answers1