Блог

Главная - Вопросы по программированию - Программная настройка элементов списка флажков с помощью пользовательского интерфейса jQuery

Программная настройка элементов списка флажков с помощью пользовательского интерфейса jQuery

#javascript #jquery #asp.net #jquery-ui #checkbox

#javascript #jquery #asp.net #jquery-пользовательский интерфейс #флажок

Вопрос:

Я создал список флажков ASP, и моя цель — выбрать первые 3 параметра по умолчанию. Любое количество первых 3 вариантов может быть выбрано вместе, но 4-й вариант является взаимоисключающим. Итак, я создал метод, чтобы проверить, установлен ли 4-й параметр, а затем отменить выбор первых 3 параметров. Кроме того, если какой-либо из первых 3 вариантов отмечен, отмените выбор 4-го варианта. Это работает нормально, пока я не добавлю jQuery UI для CSS. Теперь он не будет снимать ни один из других параметров в событии щелчка. Я проверил, и это входит в метод. Ошибок нет. Это просто не снятие флажков. Кроме того, иногда мне приходится дважды щелкнуть флажок, чтобы выбрать / отменить выбор параметров. Есть идеи?

 <asp:CheckBoxList runat="server" ID="StatusCheckBoxList" CssClass="jqcheck">
      <asp:ListItem Text="1" Value="1" Selected="True"></asp:ListItem>
      <asp:ListItem Text="2" Value="2" Selected="True"></asp:ListItem>
      <asp:ListItem Text="3" Value="3" Selected="True"></asp:ListItem>
      <asp:ListItem Text="4" Value="4"></asp:ListItem>
</asp:CheckBoxList>


function ChangeOptions(chkid) {

        var op1 = document.getElementById(chkid   "_0");
        var op2 = document.getElementById(chkid   "_1");
        var op3 = document.getElementById(chkid   "_2");
        var op4 = document.getElementById(chkid   "_3");

        if (op4.checked) {
            op1.checked = false;
            op2.checked = false;
            op3.checked = false;
        } 
        else {
            op4.checked = false;
        }
    }

И в коде я прикрепляю событие onclick:

 StatusCheckBoxList.Attributes.Add("onclick", "ChangeOptions('"   StatusCheckBoxList.ClientID   "')");

Разметка CSS:

 function loadJqueryUI() {

$(document).ready(function () {
    $(".jqcheck").buttonset();
}

Это функция пользовательского интерфейса jQuery, которую я пытаюсь использовать: http://jqueryui.com/button/#checkbox

Комментарии:

1. Опубликуйте полученный HTML-код. Если вы используете Chrome, нажмите F12, используйте увеличительное стекло, чтобы указать на свои элементы, затем вставьте структуру. Возможно, происходит то, что элементы ListItem не анализируются с указанным вами идентификатором.

2. Это упрощенная версия моего кода. На самом деле я не могу вставить HTML-разметку моего реального кода. Вы предполагаете, что jQuery изменяет имя элементов listitem? Этот код работает просто отлично, если я удаляю часть кода CssClass=»jqcheck».

3. Не jQuery, а ASP.NET вместо этого. Для анализа элементов <asp: разметки, ASP.NET изменяет идентификатор, чтобы они были уникальными на (возможных) главных страницах. Идентификатор ListItems, вероятно, изменяется во время выполнения.

4. Попробуйте установить идентификатор и ClientIDMode = "static" атрибуты для каждого элемента списка.

5. Можете ли вы опубликовать разметку CSS для jqcheck?

Ответ №1:

Обнаружена проблема. Объект jquery необходимо обновить, поэтому добавление следующего кода в конце функции ChangeOptions() устранило проблему:

 $(".jqcheck").buttonset("refresh");