jQuery-UIボタン初期アイコンを設定

Question

私は次のjQueryスクリプトを使用してチェックボックスを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答えあたりの通りです：あなたはsetCheckBoxImages()を呼び出しているとき

@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(); 
     }); 
    }; 

Answer 1

でこれを試してみて、それぞれに対して変更機能を呼び出します。

Answer 2

？コードの残りの部分を見ることなく、それは難しいですが、それを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' : '' } 
      }); 
     }); 
    }; 

Answer 3

は多分あなたの関数が呼び出されていませんが。 あなたのjavascriptあなたはjQueryのボタンのすべてをループできた

$(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' : '' } 
     }); 
    }); 
});