简体   繁体   中英

Refresh radio button without jquery ui

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> 

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM