我的目标是在选中其中一个复选框项目时取消选中其他人。这里的代码不适用于jquery mobile 1.4.2 ...
JavaScript的:
$('input.answer').on('change', function() {
$('input.answer').not(this).prop('checked', false);
});
HTML:
<form>
<fieldset data-role="controlgroup">
<legend for="0-0">Uncheck others when check one of the items</legend>
<label for="0-0-4">one</label>
<input class="answer answer-num-6" type="checkbox" name="0-0-4" id="0-0-4" value="4">
<label for="0-0-3">two</label>
<input class="answer answer-num-6" type="checkbox" name="0-0-3" id="0-0-3" value="3">
<label for="0-0-2">three</label>
<input class="answer answer-num-6" type="checkbox" name="0-0-2" id="0-0-2" value="2">
<label for="0-0-1">four</label>
<input class="answer answer-num-6" type="checkbox" name="0-0-1" id="0-0-1" value="1">
<label for="0-0-0">five</label>
<input class="answer answer-num-6" type="checkbox" name="0-0-0" id="0-0-0" value="0">
</fieldset>
</form>
答案 0 :(得分:4)
如果您正在使用jquery UI,只需添加checkboxradio函数...
$('input.answer').not(this).prop('checked', false).checkboxradio("refresh");
度过愉快的一天
答案 1 :(得分:2)
因为jQuery Mobile会为每个Checkbox
以及整个Controlgroup
添加自己的样式 - 您应该调用包含refresh
的{{1}}方法你改变了的元素。请注意,您应该在Controlgroup
事件中添加您的事件监听器。
pagecreate
&#13;
$(document).on("pagecreate", "#page-one", function() {
$('input.answer').on('change', function() {
$('input.answer').not(this).prop('checked', false);
$(this).closest("fieldset").controlgroup("refresh"); // add this line
/* Display the result */
var result = "";
$("input.answer").each(function(index) {
var caption = $(this).parent().find("label").text();
var checked = $(this).prop('checked');
result += caption + ":" + checked + " ";
});
$(this).closest("fieldset").find("legend").html(result);
});
});
&#13;