【问题标题】:How to programatically check this iphone style checkbox?如何以编程方式检查此 iphone 样式复选框?
【发布时间】:2012-08-13 15:11:16
【问题描述】:

我正在使用this iphone 风格的复选框。默认情况下选中所有复选框。如果未选中,则会显示一个模式,其中包含一个表单和所有内容。当我关闭此模式时,我希望再次启用该复选框。

这是复选框更改为false时显示模态的JS:

$(window).load(function() {
  var onchange_checkbox = $('.on_off :checkbox').iphoneStyle({
    checkedLabel: 'Confirm',
    uncheckedLabel: 'Edit',
    onChange: function(elem, value) {
        if($(elem)[0].checked==false){
            $('.modal').show();
            $("body").append('<div class="modalOverlay">');
        }
    }
  });
});

这是复选框表:

%{for(int i=0;i<confirmAtt.size ();i=i+9){}%
<tr>
<td>${confirmAtt.get(i)}</td>
<td>${confirmAtt.get(i+1)}</td>
<td>${confirmAtt.get(i+2)}</td>
<td>${confirmAtt.get(i+3)}</td>
<td>${confirmAtt.get(i+4)}</td>
<td>${confirmAtt.get(i+5)}</td>
<td>${confirmAtt.get(i+6)}</td>
<td>${confirmAtt.get(i+7)}</td>
<td>${confirmAtt.get(i+8)}</td>
<td class="modalInput on_off"><input type="checkbox" id="on_off_${i}"
    checked="checked" /></td>
</tr>
%{}}% 

带有关闭按钮的模态:

    <div class="modal" id="aModal">
        <p>
            <button class="close" onclick="foo();">Close</button>
        </p>
    </div>

调用这个函数:

function foo(){
    $('.modal').hide();
    $('.modalOverlay').remove();
    onchange_checkbox.prop('checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh");
    //tried changing this line to
    //$('.on_off').attr("checked" , true);
    //doesn't work
}

【问题讨论】:

  • 再次启用是什么意思?您想将其设置为选中吗?
  • 是的,这就是我的意思。我已经更正了。

标签: jquery html checkbox


【解决方案1】:

如果您只想将复选框设置回选中状态,可以使用以下代码:

$(window).load(function() {

      var onchange_checkbox = ($('.on_off :checkbox')).iphoneStyle();


      onchange_checkbox.prop('checked', !onchange_checkbox.is(':checked'))
      .iphoneStyle("refresh");


});

http://jsbin.com/urocug/1/

更新

抱歉,我现在看到您尝试在代码中实现此功能。问题是您将复选框声明为$(window).load(function() { 中的变量,而您尝试访问$(window).load(function() { 范围之外的相同变量


理想情况下,您需要做的是将foo(){} 函数移至$(window).load(function() {

【讨论】:

  • 哦,是的,做到了。我在$(window).load() 之外声明了变量,现在它可以工作了。我希望在外面声明它不是一个坏习惯。
  • 除非首先使用 $(window).load() 有什么特殊原因,否则我会用 $(document).ready(function() { 替换它,并确保你所有的 jquery 都包含在其中。这样你就不会在访问全局变量时遇到任何问题。
  • 我使用了$(window).load,因为它在示例中如此显示。我会按照您的建议尝试更换它。谢谢!
  • 我在示例中注意到了这一点,我在测试 jsbin 中测试了 $(document).ready() 并且效果很好。作为最佳实践,您确实应该将所有 jquery 代码放在 $(document).ready() 中。
  • 它在应用程序上不起作用。我在您的 jsbin 中进行了相同的更改,并且有效。我不明白为什么会这样。
猜你喜欢
  • 1970-01-01
  • 2019-07-16
  • 2021-06-07
  • 2012-08-12
  • 2012-10-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-18
  • 2017-05-06
相关资源
最近更新 更多