无法设置输入已检查=“已检查”通过 jQuery

Question

我有一个表，其行包含单选按钮组，如下所示：

<td class="usegsm">
  <input type="hidden" class="use-gsm" value='<%# DataBinder.Eval(Container.DataItem, "use_gsm") %>' />
  <input type="hidden" class="use-gsm-lineup" value='<%# DataBinder.Eval(Container.DataItem, "use_gsm_lineup") %>' />
  <input type="radio" id="radio1-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" name="radio-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" class="events-lineups" />
  <label for="radio1-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>">Events &amp; Lineups</label>
  <input type="radio" id="radio2-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" name="radio-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" class="events" />
  <label for="radio2-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>">Events</label>
  <input type="radio" id="radio3-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" name="radio-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" class="none" checked="checked" />
  <label for="radio3-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>">None</label>
</td>

当页面加载时（在 document.ready 内），我根据上面的 input.use-gsm 和 input.use-gsm-lineup：

function setGsmButtonStates() {
      $('td.usegsm').buttonset(); /* http://jqueryui.com/demos/button/#radio */
      $('td.usegsm').each(function(i) {
        var use_gsm = $(this).children('input.use-gsm').val();
        var use_gsm_lineup = $(this).children('input.use-gsm-lineup').val();

        if (use_gsm == 'Y' && use_gsm_lineup == 'Y') {
          $(this).children('input.events-lineups').attr('checked', true);
        }
        else if (use_gsm == 'Y' && use_gsm_lineup != 'Y') {
          $(this).children('input.events').attr('checked', true);
        }
        else {
          $(this).children('input.none').attr('checked', true);
        }

      });
    } 

出于某种原因设置 .attr('checked',true) 甚至 .attr('checked', 'checked') 没有效果。

我是否错误地使用了 $.each() 或 .attr() ？

Answer 1

问题是因为按钮集隐藏了带有 span 元素的单选按钮。将对按钮集的调用移至 end 可以解决您的问题。

function setGsmButtonStates() { 
      $('td.usegsm').each(function(i) { 
        var use_gsm = $(this).children('input.use-gsm').val(); 
        var use_gsm_lineup = $(this).children('input.use-gsm-lineup').val(); 

        if (use_gsm == 'Y' && use_gsm_lineup == 'Y') { 
          $(this).children('input.events-lineups').attr('checked', true); 
        } 
        else if (use_gsm == 'Y' && use_gsm_lineup != 'Y') { 
          $(this).children('input.events').attr('checked', true); 
        } 
        else { 
          $(this).children('input.none').attr('checked', true); 
        } 

      }); 
            $('td.usegsm').buttonset(); /* http://jqueryui.com/demos/button/#radio */ 
    }

PS：我假设您只会在页面加载期间调用此函数一次。

Answer 2

首先，我认为这不会解决您的问题，请使用 .attr('checked', 'checked')。

然后，我不确定 jQuery 是否不断轮询单选按钮以确定它们的标签是否需要更新，但我猜它不需要。使用 Firebug（或等效工具），我敢打赌您会看到复选框实际上在 DOM 中被选中，但标签样式没有更新以反映它。

如果确实如此，您需要手动将“ui-state-active”类添加到复选框的标签，以便 jQuery UI 按钮看起来被选中。 （请务必事先从集合中的所有其他标签中删除相同的类。）