jQuery-UI按钮设置初始图标

我有以下jQuery脚本将复选框转换为jQuery-UI按钮并设置要显示的图标。点击按钮时，它也会更改图标。它一切正常。然而，我似乎无法击中正确的语法来设置基于复选框的初始选中状态的初始图标。jQuery-UI按钮设置初始图标

function setCheckBoxImages() { 
     $(".check-box-image").button({ 
      icons: { primary: 'ui-icon-check' }, 
      text: false 
     }).change(function() { 
      $(this).button("option", { 
       icons: { primary: this.checked ? 'ui-icon-check' : '' } 
      }); 
     }); 
    }; 

<input class="check-box-image" type="checkbox" checked="@item.IsBusinessHours" id="checkbox1" disabled/><label for="checkbox1"></label>

编辑：这是我最后的工作标记和脚本按如下accidentalgenius答案：

@Html.CheckBox(@cbMobileId, @item.IsMobile, new { @class = "check-box-image", disabled = "disabled" })<label for="@cbMobileId">  

function setCheckBoxImages() { 
     var checkboxes= $(".check-box-image"); 

     checkboxes.button({ 
      text: false 
     }).change(function() { 
      $(this).button("option", { 
       icons: { primary: this.checked ? 'ui-icon-check' : 'ui-icon-minus' } 
      }); 
     }); 

     checkboxes.each(function() { 
      $(this).change(); 
     }); 
    };

来源

2012-01-30 daveywc

你可以通过所有的jQuery按钮的循环，并呼吁改变功能的每一个。

来源

2012-01-30 06:00:23 Robert

在上面的原始问题中放了我用过的最后一个脚本。 – daveywc 2012-01-30 06:06:12

当你打电话setCheckBoxImages()？没有看到其余的代码很难，但请尝试在document.ready上调用它。

您应根据复选框的状态来设置初始图标：

function setCheckBoxImages() { 
     var check = $(".check-box-image"); 
     check.button({ 
      icons: { primary: check.is(':checked') ? 'ui-icon-check' : '' }, 
      text: false 
     }).change(function() { 
      $(this).button("option", { 
       icons: { primary: this.checked ? 'ui-icon-check' : '' } 
      }); 
     }); 
    };

来源

2012-01-30 02:18:14

我在document.ready上调用了这个函数 – daveywc 2012-01-30 02:42:58

我在我的答案中添加了一些代码。我基本上是在按钮构建过程中应用相同的验证。 – 2012-01-30 02:52:46

我刚刚试过你的代码，它不适合我。所有“复选框”仍然显示“ui-icon-check”图标 - 不管它们是否被选中。 – daveywc 2012-01-30 04:19:19

也许你的函数没有被调用。试试这个在您的JavaScript

$(document).ready(function(){ 
    $(".check-box-image").button({ 
     icons: { primary: 'ui-icon-check' }, 
     text: false 
    }).change(function() { 
     $(this).button("option", { 
      icons: { primary: this.checked ? 'ui-icon-check' : '' } 
     }); 
    }); 
});

来源

2012-01-30 02:47:39

我已经在document.ready函数中调用了这个脚本。 – daveywc 2012-01-30 04:17:04

好的，我认为你的帖子上的代码没有错误。我复制并粘贴你的代码到我的html文件中，它正在工作。也许你的其他JavaScript代码有错误，所以你的代码无法正常工作。核实！ – 2012-01-30 06:04:04

jQuery-UI按钮设置初始图标

回答

相关问题