如何使用jQuery Mobile制作水平单选按钮控制组

如何使用jQuery Mobile制作水平单选按钮控制组：

1. 引入jQuery Mobile库

首先，在head标签中引入jQuery和jQuery Mobile的库：

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

这里我们使用了jQuery Mobile版本1.4.5，如果您使用的版本不同，请相应地调整链接。

2. 制作水平单选按钮控制组

制作水平单选按钮控制组的基本代码如下：

<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
  <label for="radio-choice-1">Choice 1</label>
  <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
  <label for="radio-choice-2">Choice 2</label>
  <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
  <label for="radio-choice-3">Choice 3</label>
</fieldset>

我们使用了<fieldset>标签来定义一组控件，使用了data-role="controlgroup"来定义控制组的类型，使用了data-type="horizontal"来表示这个控制组是水平排列的。其中，每个单选框都有一个name属性，值相同的单选框会被视为同一组，只能选中其中的一项。

3. 示例说明

下面我们使用两个示例来进一步说明如何使用jQuery Mobile制作水平单选按钮控制组：

示例1：禁用其中一个选项

有些情况下，我们可能需要禁用其中一个选项。比如在下面的例子中，当用户选择了“Other”，就需要填写一个文本框，此时就应该禁用“None”选项。代码如下：

<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="radio" name="radio-choice-2" id="radio-choice-4" value="none" checked="checked">
  <label for="radio-choice-4">None</label>
  <input type="radio" name="radio-choice-2" id="radio-choice-5" value="other">
  <label for="radio-choice-5">Other:</label>
  <input type="text" name="other-choice" id="other-choice" disabled>
</fieldset>

<script>
$("#radio-choice-5").click(function() {
  $("#other-choice").prop("disabled", false);
  $("#radio-choice-4").prop("disabled", true).checkboxradio("refresh");
});

$("#radio-choice-4").click(function() {
  $("#other-choice").prop("disabled", true);
  $("#radio-choice-5").prop("checked", true).checkboxradio("refresh");
});
</script>

注意，在每个单选框的HTML代码中，我们都使用了相应的id，以便在后面使用jQuery来操作。在JavaScript代码中，我们使用了jQuery的prop()方法来禁用/启用控件，同时使用checkboxradio("refresh")来刷新单选框的状态。

示例2：动态添加选项

还有一种常见的情况就是，我们需要动态地添加选项。比如在下面的例子中，我们首先有三个选项，当用户点击add按钮时，我们动态地添加了一个新的选项。代码如下：

<fieldset data-role="controlgroup" data-type="horizontal" id="controlgroup-1">
  <input type="radio" name="radio-choice-3" id="radio-choice-6" value="choice-6" checked="checked">
  <label for="radio-choice-6">Choice 6</label>
  <input type="radio" name="radio-choice-3" id="radio-choice-7" value="choice-7">
  <label for="radio-choice-7">Choice 7</label>
  <input type="radio" name="radio-choice-3" id="radio-choice-8" value="choice-8">
  <label for="radio-choice-8">Choice 8</label>
</fieldset>

<a href="#" id="add-choice" data-role="button">Add a Choice</a>

<script>
var i = 9;
$("#add-choice").click(function() {
  var html = '<input type="radio" name="radio-choice-3" id="radio-choice-' + i + '" value="choice-' + i + '"><label for="radio-choice-' + i + '">Choice ' + i + '</label>';
  $("#controlgroup-1").append(html).trigger("create");
  i++;
});
</script>

注意，在动态添加选项的按钮中，我们也使用了jQuery Mobile的data-role="button"属性来美化这个按钮的样式。在JavaScript中，我们首先定义了一个变量i，用于存储新选项的编号。然后在按钮的click事件中，我们首先根据i的值生成了一个新的HTML代码，然后通过append()方法将这段代码添加到选择器所选中的控件中。最后，我们调用了trigger("create")方法来刷新UI。