Question

我有两排单选按钮，根据选择，有无效组合。有效组合是（条形，年份）（条形，状态）（区域，年份）和（地图，州）。当用户选择“区域”时，我想自动选择“年份”并禁用“状态”单选按钮。我想为'Map'做同样的事情并禁用'Year'。我有的代码应该这样做，但选择单选按钮不起作用。为什么不呢？

以下是单选按钮的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>

Answer 1

试试这个，首先启用两个复选框，然后测试地图或区域：

$(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

jQuery Mobile选择的单选按钮不起作用

1 个答案: