Мониторинг изменений DOM в JQuery

Question

Есть ли способ определить, когда отключенный атрибут ввода изменяется в JQuery. Я хочу переключать стиль в зависимости от значения.

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

Могу ли я создать пользовательское событие, которое будет контролировать отключенный атрибут указанных входов?

Пример:

 <style type="text/css">.disabled{ background-color:#dcdcdc; }</style>


<fieldset>
    <legend>Option 1</legend>
    <input type="radio" name="Group1" id="Radio1" value="Yes" />Yes
    <input type="radio" name="Group1" id="Radio2" value="No" checked="checked" />No
    <div id="Group1Fields" style="margin-left: 20px;">
        Percentage 1:
        <input type="text" id="Percentage1" disabled="disabled" /><br />
        Percentage 2:
        <input type="text" id="Percentage2" disabled="disabled" /><br />
    </div>
</fieldset>
<fieldset>
    <legend>Option 2</legend>
    <input type="radio" name="Group2" id="Radio3" value="Yes" checked="checked" />Yes
    <input type="radio" name="Group2" id="Radio4" value="No" />No
    <div id="Group2Fields" style="margin-left: 20px;">
        Percentage 1:
        <input type="text" id="Text1" /><br />
        Percentage 2:
        <input type="text" id="Text2" /><br />
    </div>
</fieldset>
<script type="text/javascript">
    $(document).ready(function () {

        //apply disabled style to all disabled controls
        $("input:disabled").addClass("disabled");

        $("input[name='Group1']").change(function () {
            var disabled = ($(this).val() == "No") ? "disabled" : "";
            $("#Group1Fields input").attr("disabled", disabled);

            //apply disabled style to all disabled controls
            $("input:disabled").addClass("disabled");

            //remove disabled style to all enabled controls
            $("input:not(:disabled)").removeClass("disabled");

        });
        $("input[name='Group2']").change(function () {
            var disabled = ($(this).val() == "No") ? "disabled" : "";
            $("#Group2Fields input").attr("disabled", disabled);

            //apply disabled style to all disabled controls
            $("input:disabled").addClass("disabled");

            //remove disabled style to all enabled controls
            $("input:not(:disabled)").removeClass("disabled");
        });           

    });
</script>

Answer 1

После дальнейшего изучения этой проблемы я наткнулся на сообщение в блоге Рика Стрэла, в котором мы демонстрируем плагин jQuery, который позволяет отслеживать свойства CSS: Обновлен плагин jQuery для мониторинга свойств CSS

Answer 2

Хотя существуют более эффективные способы решения этой проблемы, одним из способов решения этой проблемы является запуск функции каждые хх секунд, которая установит необходимые классы CSS для отключенных элементов:

window.setInterval(1000,function() {
    $("input:disabled").addClass("disabled");
    $("input:enabled").removeClass("disabled");
});

Это проверитвсе элементы ввода каждую секунду.Но опять же, это ОЧЕНЬ плохое решение.Вы бы лучше реструктурировали свой код.

Не меняя слишком много вашего кода и HTML, я бы сделал что-то вроде этого (хотя и не проверял):

$("input[name^=Group]").change(function () {
        var disabled = ($(this).val() == "No") ? "disabled" : "";
        var groupName = $(this).attr("name");

        $("#" + groupName + "Fields input")
             .attr("disabled", disabled)
             .addClass("disabled");

        //remove disabled style to all enabled controls
        $("input:enabled)").removeClass("disabled");
    });

Answer 3

Вы можете воспользоваться вашим макетом и заставить все ваши обработчики находить вещи относительно, сокращая весь ваш текущий код так:

$(function() {
    $("input:disabled").addClass("disabled");

    $(":radio").change(function() {
        var disabled = this.checked && this.value == "No";
        $(this).siblings("div").find("input")
            .attr('disabled', disabled)
            .toggleClass('disabled', disabled);
    });
});

Вы можете посмотреть демо здесь , также, поскольку вы знаете, какой класс, элементы и хотите ли вы, чтобы он был включен или выключен, вы можете использовать .toggleClass(class, bool), чтобы сократить но дальше. Если вы хотите, чтобы это было более точно, вы можете назначить этим переключателям класс, например:

<input type="radio" name="Group1" id="Radio1" value="Yes" class="toggler" />

Тогда вы можете сделать $(".toggler") вместо $(":radio"), то же самое для div, вы можете присвоить ему класс и сделать .siblings(".fields") вместо .siblings("div") ... смысл в том, что ваш макет соответствует используйте это в своих интересах, когда СУХОЕ кодирование .

Answer 4

Я предполагаю, что вы хотите разрешить ввод текста в том же наборе полей, а? Попробуйте это:

$('input[type="radio"]').change(function() {
  if (this.value == "No") {
    $('input[type="text"]', $(this).parents('fieldset')).attr('disabled', 'disabled');
  } else {
    $('input[type="text"]', $(this).parents('fieldset')).attr('disabled', '');
  }
});