Удалить отключенный атрибут по клику отключенного поля формы

Question

У меня есть поле формы, которое вначале отключено, и для его включения есть onClick. OnClick не срабатывает (по крайней мере, в FF), а также не выводит простое предупреждение (1);.

Хакерская версия - показывать на своем месте поддельное поле формы, которое "выглядит" как отключенное (стиль, выделенный серым цветом) и onClick, скрывать его и показывать правильное включенное поле, но это ужасно.

Пример кода

Это работает:

<input type="text" id="date_end" value="blah" onClick="this.disabled=true;">

Это работает:

<label for="date_end_off" onClick="document.getElementById('date_end').disabled=false">Test</label>
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

Это не удалось:

<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

Это не удалось:

<input type="text" id="date_end" value="blah" onClick="document.getElementById('date_end').disabled=false" disabled>

Answer 1

Я наткнулся на эту тему на другом форуме, поэтому я полагаю, что мне придется пойти по другому пути.

http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox и, возможно, другие браузеры, отключить события DOM в полях формы, которые отключены Любое событие, которое начинается в отключенное поле формы полностью отменен и не распространяется Дерево DOM. Поправьте меня, если я ошибаюсь, но если вы нажмете на отключенную кнопку, источником события является отключена кнопка и событие нажатия полностью уничтожен. Браузер буквально не знает кнопку получил щелкнул, и при этом он не передает щелчок событие на. Это как если бы вы нажимаете на черной дыре на веб-странице.

Работа вокруг:

1. Стиль полей даты, чтобы выглядеть так, как если бы они отключены.
2. Создать скрытое поле формы "use_date" со значением бита для определения использовать ли поля даты во время обработки.
3. Добавить новую функцию в onClick полей даты, которая будет изменить класс стиля, чтобы появиться включил и установил значение "use_date" до 1.

Answer 2

Используйте readonly вместо disabled

По крайней мере, для флажков они выглядят отключенными, но ведут себя нормально (проверено в Google Chrome) Вам нужно будет поймать щелчок и предотвратить действие по умолчанию для события в зависимости от ситуации.

Answer 3

Цитирование Quirksmode.org :

"Событие щелчка в отключенном поле формы не запускает события в Firefox и Safari. Opera вызывает события mousedown и mouseup, но не событие click. IE запускает mousedown и mouseup, но не щелкает, форма. Все эти реализации считаются правильными. "

Таблица совместимости Quirksmode великолепна, чтобы узнать больше о таких проблемах.

Answer 4

Используя jQuery, я прикрепляю обработчик событий к родителям моих элементов управления вводом.

<script type="text/javascript">
    $(function() {
        // disable all the input boxes
        $(".input").attr("disabled", true);

        // add handler to re-enable input boxes on click
        $("td:has(.input)").click(function() {
            $(".input", this).removeAttr("disabled");
        });
    });
</script>

Все мои элементы управления вводом имеют класс «input» и существуют в своих собственных ячейках таблицы. Если вы хотя бы обернули входные теги в div, то это должно работать и без таблицы.

Answer 5

У меня недавно была очень похожая проблема, и я решил ее, поместив вход в div и переместив onClick в div.

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>

Answer 6

Если вы просто хотите запретить пользователю вводить данные в вашем поле, но вместо этого хотите, чтобы поле имело значение populate для события, то моим хакерским решением было вообще не отключать поле ввода, а вместо этого после запуска моего onclick или onfocus функции, для вызова blur(), поэтому пользователь не может редактировать поле.

Answer 7

Чтобы включить отключенный элемент на стороне клиента, скажем, в ответ на отмеченный флажок или что-то еще, мне пришлось использовать комбинацию JS и jQuery, см. Ниже:

//enable the yes & no RB 
function enable()
{
        var RBNo = "rbnBusinessType";
        var RBYes = "rbnBusinessType";

        //jQuery approach to remove disabled from containing spans            
        $("#" + RBYes).parent().removeAttr('disabled');
        $("#" + RBNo).parent().removeAttr('disabled');

        //enable yes and no RBs
        document.getElementById(RBYes).disabled = false;
        document.getElementById(RBNo).disabled = false;               

}

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

this._Organization.BusinessTypeHUbZoneSmall = Request.Params ["rbnBusinessTypeHUbZoneSmall"] == rbnBusinessTypeHUbZoneSmallYes.ID;

Вдохновение взято из: https://stackoverflow.com/questions/6995738/asp-javascript-radiobutton-enable-disable-not-included-in-postback-ajax для получения дополнительной информации

Answer 8

Вы можете добавить div к входу, который отключен: проверьте его

 <div onclick="javascript:document.forma.demo1.disabled=false;" style="border:0px solid black; padding:00px;">
    <input type=text name="demo1" disabled style="width:30;">
  </div>

Answer 9

Не реализуйте логику события onClick в значении onClick поля ввода. Вероятно, поэтому он не работает в Firefox. Вместо этого определите функцию как значение onClick. Например:

<input type="text" id="date_end" value="blah" onClick="doSomething()" disabled>

<script type="text/javascript">
  function doSomething()
  {
    alert("button pressed");
  }
</script>

Также стоит посмотреть на JQuery. Вы можете использовать его для добавления или удаления атрибутов элементов и всех других вещей. Например, вы можете удалить отключенное из поля ввода, написав такую ​​функцию:

<script type="text/javascript">
      function doSomething()
      {
        alert("button pressed");
         $("#date_end").removeAttr('disabled'); //removes the disabled attribut from the  
                                                //element whose id is 'date_end'
      }
</script>

ИЛИ вы можете добавить его следующим образом:

$("#date_end").attr('disabled','true');

Сайт Jquery здесь

Answer 10

Включение отключенного элемента при щелчке приводит к потере цели отключения, не так ли? Если вам действительно нужно поведение, которое вы описываете, просто измените стиль на «отключенный» и удалите эти стили по щелчку.