Установите флажок с помощью jQuery

Question

Я разработал интерфейс каталога продуктов с использованием ASP.NET, jQuery, JSON и jTemplates.

В основном интерфейс извлекает выгруженный набор продуктов из базы данных с использованием jQuery и JSON и отображаетпродукты во внешнем интерфейсе (одна страница за раз), использующие jTemplate 'productItemTemplate', см. ниже.

Вот фрагмент моего кода:

<script type="text/javascript">

var selectedProductIDs = '1, 2 ';

    function displayProductCheckboxes() {
        var productIDs = selectedProductIDs.split(", ");
        var checkboxes = $('input:checkbox[name="chkProduct"]');

        for (var j = 0; j < productIDs.length; j++) {
            checkboxes
            .filter('[id="' + productIDs[j] + '"]')
            .attr('checked', 'checked');
        };
    }

    <script type="text/html" id="productItemTemplate">    
        <ul class="items-list">        
        {#foreach $T.items as record}                                       
            <li class="item-detail">

              <a class="item-productimage-link" href="<%=Page.ResolveUrl("~/Product/Detail.aspx?ProductID={$T.record.ProductSummaryViewID}") %>">
                <img class="item-productimage" src="<%=Page.ResolveUrl("~/Content/Images/Products/{$T.record.ProductSummaryViewID}.jpg") %>" />
              </a>

              <div class="item-productname">
                <a href="<%=Page.ResolveUrl("~/Product/Detail.aspx?ProductID={$T.record.ProductSummaryViewID}") %>">{$T.record.BrandName} {$T.record.Name}</a>
              </div>

             <div class="item-price">{$T.record.Price}</div>

             <div><input type="checkbox" class="" name="chkProduct" id="{$T.record.ProductSummaryViewID}" onclick="JavaScript:selectProduct({$T.record.ProductSummaryViewID})"/>Select me!</label></div>

           </li>
           {#/for}  
        </ul>                  
    </script>

У каждого продукта есть флажок «chkProduct» - см. Выше.Я бы хотел, чтобы пользователь мог выбрать продукт, щелкнув соответствующий флажок, и чтобы выбор пользователя сохранялся на страницах.

Для этого я поддерживаю список выбранных идентификаторов продукта «selectedProductIDs» - см.выше.

Каждый раз, когда я загружаю страницу продуктов, я вызываю функцию displayProductCheckboxes (), которая предназначена для проверки ранее отмеченных флажков.

Неудобно.он не проверяет ранее отмеченные флажки.

Может кто-нибудь помочь мне решить эту проблему, пожалуйста, или предложить альтернативное рабочее решение.

Спасибо.

С уважением

Walter

Answer 1

jQuery представил метод prop () в версии 1.6, так как attr () долгое время был проблематичным в различных ситуациях. Используйте prop () вместо attr () для таких свойств, как «флажок». «флажок» - это свойство элемента, а не атрибут

http://api.jquery.com/prop/

Answer 2

Ваша примерная функция работает правильно для меня в FF 10.0.2 с jQuery 1.7.1.Может быть, вы не вызываете функцию displayProductCheckboxes(); на $(document).ready()?

Я построил небольшое jsfiddle: смотрите здесь .

Answer 3

У меня была эта проблема в IE. Я установил свойство defaultChecked.

checkBox.defaultChecked = true;