Реагируя на нажатие ListItems в CheckboxList

Question

Я хотел бы применить некоторую логику к странице, содержащей элемент управления CheckBoxList, когда пользователь проверяет или снимает флажки с отдельных элементов флажков. Скажем, например, чтобы динамически показать или скрыть связанный элемент управления.

Я придумал способ использования механизма обратного вызова ASP.Net 2.0 (AJAX) с комбинацией клиентской Javascript и серверной логики в коде позади. Тем не менее, это решение не является пуленепробиваемым (то есть, скорее всего, страдает от временных проблем). Он не переносим, ​​потому что код должен знать последовательные идентификаторы отдельных элементов и т. Д.

Код, который я создал, разделен на две функции: одна обрабатывает событие onclick, а другая обрабатывает возвращенную строку обратного вызова:

<script type="text/javascript">

function OnCheckBoxClicked()
{
    // gathers the semi-colon separated list of labels,
    // associated with the currently checked items

    var texts = '';

    // iterate over each individual checkbox item
    // items in a checkboxlist are sequential, so
    // stop iteration at the first missing sequence number

    for (var index = 0; index < 99; index++)
    {
        var checkbox = document.getElementById('ctl00_cphAdmin_cblCategories_' + index);
        if (checkbox == null)
            break;

        if (checkbox.checked)
        {

            // find label associated with the current checkbox item

            var labels = document.getElementsByTagName('label');
            for (var index_ = 0; index_ < labels.length; index_ ++)
            {
                if (labels[index_].htmlFor == checkbox.id)
                {
                    texts = texts + labels[index_].innerHTML + ';';
                    break;
                }
            }
        }
    }

    // perform callback request
    // result will be processed by the UpdateCheckBoxes function

    WebForm_DoCallback('__Page', '_checkbox' + texts, UpdateCheckBoxes, 'checkbox', null, true /* synchronous */);
}
</script>

В этом примере мои флажки соответствуют категориям поста в блоге.

Мне нужно обработать полученную строку обратного вызова как содержащую список разделенных точкой с запятой имен флажков, чтобы установить / снять флажок, чтобы убедиться, что связанные родительские / дочерние категории синхронизированы правильно. Эта строка является результатом логики, выполненной на сервере.

В других случаях полученная строка обратного вызова может быть чем-то другим.

<script type="text/javascript">

function UpdateCheckBoxes(returnmessage, context)
{
    if (returnmessage == null || returnmessage == '')
        return ;

    // iterate over each individual checkbox item
    // items in a checkboxlist are sequential, so
    // stop iteration at the first missing sequence number

    for (var index = 0; index < 99; index++)
    {
        var checkbox = document.getElementById('ctl00_cphAdmin_cblCategories_' + index);
        if (checkbox == null)
            break;

        // find label associated with the current checkbox item

        var label = '';
        var labels = document.getElementsByTagName('label');
        for (var index_ = 0; index_ < labels.length; index_ ++)
        {
            if (labels[index_].htmlFor == checkbox.id)
            {
                label = ';' + labels[index_].innerHTML + ';';
                break;
        }
    }

        // perform custom processing based on the contents
        // of the returned callback string

        // for instance, here we check whether the returnmessage
        // contains the string ';' + label + ';'


        if (returnmessage.indexOf(label, 1) > 0)
        {
            // do something
        }        
    }
}

</script>

Нет ли более элегантного решения этой проблемы?

Answer 1

Я бы сделал пару вещей. Во-первых, я бы нашел способ передать значение, которое необходимо передать обратно клиентскому обработчику onclick. В зависимости от того, как вы заполняете свой CheckBoxList, это может быть так же просто, как добавить атрибут «onclick» в ListItem для этого флажка, который вызывает вашу функцию с тем же значением, назначенным для метки, скажем «OnCheckBoxClicked (this,« Label ») , Это избавило бы от необходимости извлекать метку, хотя вы, вероятно, могли бы сделать это и на стороне клиента довольно легко, сославшись на предыдущий элемент флажка, если вы только что передали ссылку на него (или родитель, возможно, зависит от того, метка предшествует вводу или ввод содержится в нем).

Во-вторых, я бы также изменил его, чтобы он возвращал только текущий элемент, по которому щелкнули, и обрабатывал их по одному за раз.

Предполагая, что ваши флажки (при визуализации) выглядят примерно так:

  <label for="something">CheckBox 1</label>
  <input type='checkbox' id='ctl00_....' value='1' onclick="OnCheckBoxClicked(this,'CheckBox_1');" />

Ваши функции могут выглядеть следующим образом:

function OnCheckBoxClicked(checkbox,identifier)
{
  // do something based on the checkbox clicked

  WebForm_DoCallback('__Page', identifer, UpdateCheckBoxes, {checkbox: checkbox.id, label: identifier } , null, true /* synchronous */);
}

function UpdateCheckBoxes(result,context)
{
   var checkbox = document.getElementById(context.checkbox);
   var identifier = context.label;

   if (result)  // AJAX method now returns true/false as context holds info on controls
   {
       ... do something...
   }
}

Answer 2

вы можете добавить событие к элементу управления флажок на событие onclick (). и отправить идентификатор элемента управления в качестве параметра, а затем обновить атрибуты требуемого элемента управления

<input type='checkbox' id='ctl00_....' value='1' onclick="OnCheckBoxClicked('ctrl_toUpdateID');" />



<script type="text/javascript">

function OnCheckBoxClicked(ctrlID)
{
  var ctrl = document.getElementById(ctrlID);
  if(ctrl.getAttribute('disabled')
 ctrl.removeAttribute('disabled')
else
    ctrl.setAttribute('disabled','disabled')


}
</script>