如何在jQuery Mobile Controlgroup中检查一个时取消选中其他人?

时间:2017-09-16 20:12:04

标签: jquery jquery-mobile checkbox

我的目标是在选中其中一个复选框项目时取消选中其他人。这里的代码不适用于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> 

2 个答案:

答案 0 :(得分:4)

如果您正在使用jquery UI,只需添加checkboxradio函数...

$('input.answer').not(this).prop('checked', false).checkboxradio("refresh");

度过愉快的一天

答案 1 :(得分:2)

因为jQuery Mobile会为每个Checkbox以及整个Controlgroup添加自己的样式 - 您应该调用包含refresh的{​​{1}}方法你改变了的元素。请注意,您应该在Controlgroup事件中添加您的事件监听器。

&#13;
&#13;
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;
&#13;
&#13;