使用 jquery 更改后刷新复选框

Question

我有两个复选框，一个带有label，一个没有：

$('#b').click(function() {
  $('#ch1').prop('checked', true);
  $('#ch3').prop('checked', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="ch1">Box 1</label>
<input type="checkbox" id="ch1" name="check1" />
<input type="checkbox" id="ch3" name="check2" />
<button id="b">click here</button>

点击按钮后，两个复选框似乎都被选中，但只有第二个显示“勾号”。如何刷新带标签的复选框？

Answer 1

在jQuery Mobile 中使用prop 更改其状态后，您需要使用.checkboxradio('refresh') 刷新复选框。这是一个例子：

$('#b').click(function() {
    $('#ch1, #ch3').prop('checked', true).checkboxradio('refresh');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css" rel="stylesheet"/>

<label for="ch1">Box 1</label>
<input type="checkbox" id="ch1" name="check1" />
<input type="checkbox" id="ch3" name="check2" />
<button id="b">click here</button>

Answer 2

您的代码按预期工作？

$('#b').click(function() {
    $('#ch1').prop('checked', true);       
    $('#ch3').prop('checked', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="ch1">Box 1</label>
<input type="checkbox" id="ch1" name="check1"/>          
<input type="checkbox" id="ch3" name="check2"/>
<button id="b">click here</button>