jQuery Mobile 快速单选按钮答案

【问题标题】：jQuery Mobile Fast Radio ButtonsjQuery Mobile 快速单选按钮
【发布时间】：2013-05-24 02:29:23
【问题描述】：

关于在移动设备上使用网络应用程序时按钮响应性问题的另一个话题。

我正在监听touchend 事件以触发按下单选按钮。这解决了使按钮更具响应性的问题，但会产生另一个问题。

当事件发生时，jQuery mobile 会应用 ui-icon-radio-on、ui-radio-on、ui-btn-hvr-a、ui-btn-dwn-a 等类。即使事件结束，这也会使按钮看起来仍然被按下。它最终是一个体面的工作来兼顾删除和添加所有这些类以使一切看起来正确。

我的问题是 - 有没有人有一种优雅的方式来添加和删除所需的类和属性。

或

在手动处理基于事件触发器的样式方面，是否有更好的方法来解决这个问题，而不涉及“重新创建轮子”。谷歌的快速按钮会是更好的解决方案吗？（不知道如何整合）。有没有更简单的方法？

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
if($(this).hasClass('AdminSurv') && event.type=='pageinit') {
    $(this).on( 'touchend', '.ui-radio', function(event) {
        event.preventDefault();

        /*uncheck all radios in control group to avoid multiple checks*/
        var _control_group = $(this).parent();
        _control_group.find("input:radio:checked").attr('checked',false);

        /*check the radio*/
        $(this).find('input').attr('checked', true);

        /*much juggling of classes/attributes going on here
          still looks like the buttons are being held down
          this is a very sloppy example of my initial attempt*/
        _control_group.find('label').removeClass('ui-radio-on');
        _control_group.find('label').removeAttr('data-icon');
        _control_group.find('label span span').removeClass('ui-icon-radio-on');

        $(this).find('label').removeClass('ui-radio-off');
        $(this).find('label').addClass('ui-radio-on');
        $(this).find('label').attr('data-icon','radio-on');

        $(this).find('label span span').removeClass('ui-icon-radio-off');
        $(this).find('label span span').addClass('ui-icon-radio-on');
    });
  }
});

【问题讨论】：

你不应该做这个忙碌的工作。您需要做的就是使用.prop('checked', false/true); 和.checkboxradio('refresh') 检查此stackoverflow.com/questions/15706443/…
完美！我希望存在这样的解决方案。在我搜索的时间里没有找到它是我的坏事。一件小事 - 使用这种方法，我在查看 web 检查器时没有看到输入属性 checked="checked" 被应用，但是当我提交表单时，我看到确实存在 POST 数据。我确实看到课程正在更新。奇怪的故障吧？请发布您提供的信息作为答案，以便您获得信用。再次抱歉没有找到已经存在的信息。
很高兴您的问题得到了解决。我会写一个详细的答案。

标签： jquery-mobile web-applications user-interface touch

【解决方案1】：

许多 jQuery Mobile 小部件接受 refresh 方法，在该方法中，它用于增强 DOM 中已存在或动态插入的元素的标记。

对于复选框和单选按钮，.checkboxradio('refresh') 结合.prop() 用于通过添加/删除类来增强/修改标记，用于动态选中和未选中元素。

检查

$('.selector').prop('checked', true).checkboxradio('refresh');

取消选中

$('.selector').prop('checked', false).checkboxradio('refresh');

Demo

参考：Checkboxradio Widget

【讨论】：