javascript - jQuery Mobile 选择单选按钮不起作用-6ren

javascript - jQuery Mobile 选择单选按钮不起作用

转载作者：行者123 更新时间：2023-12-03 07:56:02

我有两行单选按钮，根据选择，存在无效组合。有效组合为(条形图，年份)(条形图，州)(区域，年份)和( map ，州)。当用户选择“区域”时，我想自动选择“年份”并禁用“州”单选按钮。我想对“ map ”执行相同的操作并禁用“年份”。我的代码应该执行此操作，但是单选按钮的选择不起作用。为什么不呢？

这是documentation对于单选按钮。

请参阅fiddle .

$(document).on("change", ".chart-type", function(event, ui) {
    if (this.value == "map") {
        $("#radio-group-by-state").checkboxradio('enable').checkboxradio("refresh");
        $("#radio-group-by-state").attr("checked", true).checkboxradio("refresh");
        $("#radio-group-by-year").checkboxradio('disable').checkboxradio("refresh");
    } else if (this.value == "area") {
        $("#radio-group-by-year").checkboxradio('enable').checkboxradio("refresh");
        $("#radio-group-by-year").attr("checked", true).checkboxradio("refresh");
        $("#radio-group-by-state").checkboxradio('disable').checkboxradio("refresh");
    } else {
        $("#radio-group-by-state").checkboxradio('enable').checkboxradio("refresh");
        $("#radio-group-by-year").checkboxradio('enable').checkboxradio("refresh");
    }
});

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div data-role="fieldcontain" class="ui-field-contain">
    <fieldset data-type="horizontal" data-role="controlgroup" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
        <div class="ui-controlgroup-controls ">
            <div class="ui-radio">
                <label data-form="ui-btn-up-a" for="radio-chart-type-bar" class="ui-btn ui-corner-all ui-btn-a ui-radio-off ui-first-child">
                    Bar
                </label>
                <input type="radio" value="bar" id="radio-chart-type-bar" class="update-chart chart-type" name="radio-chart-type" data-theme="a">
            </div>
            <div class="ui-radio chart-type-area">
                <label data-form="ui-btn-up-a" for="radio-chart-type-area" class="ui-btn ui-corner-all ui-btn-a ui-radio-off">
                    Area
                </label>
                <input type="radio" value="area" id="radio-chart-type-area" class="update-chart chart-type" name="radio-chart-type" data-theme="a">
            </div>
            <div class="ui-radio">
                <label data-form="ui-btn-up-a" for="radio-chart-type-map" class="ui-btn ui-corner-all ui-btn-a ui-radio-off ui-last-child">
                    Map
                </label>
                <input type="radio" value="map" id="radio-chart-type-map" class="update-chart chart-type" name="radio-chart-type" data-theme="a">
            </div>
        </div>
    </fieldset>
</div>
<div data-role="fieldcontain" class="ui-field-contain">
    <fieldset data-type="horizontal" data-role="controlgroup" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
        <div class="ui-controlgroup-controls ">
            <div class="ui-radio">
                <label data-form="ui-btn-up-b" for="radio-group-by-year" class="ui-btn ui-corner-all ui-btn-a ui-radio-on ui-btn-active ui-first-child">
                    Year
                </label>
                <input type="radio" checked="checked" value="year" id="radio-group-by-year" class="update-chart radio-group-by" name="radio-group-by" data-theme="a">
            </div>
            <div class="ui-radio">
                <label data-form="ui-btn-up-b" for="radio-group-by-state" class="ui-btn ui-corner-all ui-btn-a ui-radio-off ui-last-child">
                    State
                </label>
                <input type="radio" value="state" id="radio-group-by-state" class="update-chart radio-group-by" name="radio-group-by" data-theme="a">
            </div>
        </div>
    </fieldset>
</div>
  </body>

最佳答案

试试这个，首先启用两个复选框，然后测试 map 或区域:

$(document).on("change", ".chart-type", function(event, ui) {
    $("#radio-group-by-state").checkboxradio('enable').checkboxradio("refresh");
    $("#radio-group-by-year").checkboxradio('enable').checkboxradio("refresh");
    if (this.value == "map") {
        $("#radio-group-by-state").prop("checked", true).checkboxradio("refresh");
        $("#radio-group-by-year").checkboxradio('disable').checkboxradio("refresh");
    } else if (this.value == "area") {
        $("#radio-group-by-year").prop("checked", true).checkboxradio("refresh");
        $("#radio-group-by-state").checkboxradio('disable').checkboxradio("refresh");
    }
});

已更新 FIDDLE

关于javascript - jQuery Mobile 选择单选按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34796903/

文章推荐： javascript - Mac OS X 上的本地主机 :8080 is not loaded for Node. js

文章推荐： javascript - 从 JSON 数组访问字符串值

文章推荐： javascript - 使用 noConflict 方法后下划线未定义

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery Mobile 选择单选按钮不起作用