Устранение неполадок JQuery включить / отключить текстовое поле на основе радиокнопки

Question

Устранение неполадок JQuery включить / отключить текстовое поле на основе радиокнопки

0

Существует несколько сообщений о том, как включить текстовое поле на основе выбора переключателя с помощью jquery. Источник: отключить/включить текстовое поле с помощью переключателя (jQuery)

У меня нет опыта работы с javascript, и я не могу заставить любой из этих примеров работать.

Я пробовал несколько примеров, предоставляемых через jfiddle, но они не работают в моем приложении.

Итак, контрольный список: 1) javascript работает вообще, потому что у меня есть копия и вставка виджета для выбора даты, который работает отлично. 2) У меня есть теги, обертывающие фрагменты кода 3) Не имеет значения, находится ли он в теле или заголовке.

Вот пример кода, который я использую В представлении (это codeigniter)

<script src="//code.jquery.com/jquery-1.9.1.js">
//enable a box if the radio button is selected

$('input[name="radioknof"]').on('click', function() {
$(this).next().prop('disabled',false).siblings('input[type=text]').prop('disabled',true);
});
</script>

<input type="radio" name="radioknof" value="text1"/>
<input type="text" id="id1" disabled="disabled"/><br/><br/>
<input type="radio" name="radioknof" value="text2"/>  
<input type="text" id="id2" disabled="disabled"/>

Очевидно, что я пропустил что-то столь же простое, как синтаксическая ошибка... но я не могу, чтобы жизнь меня видна. Я не понимаю, почему jfiddle работает на 100%, а на моем локальном сервере это не так.

(Коробки оба отключены независимо от выбора переключателя)

Maxcot 14 март 2014, в 02:29

Источник

Теги:

javascript

jquery

html

3 ответа

1

У вас есть <script src="//code.jquery.com/jquery-1.9.1.js"> с кодом внутри него. У вас должно быть что-то большее:

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  <script type='text/javascript'>
    // put your code in here
  </script>
</body>
</html>

Либо это, либо использовать событие load внутри вашего <head>. Вы не можете определить src а также поместить код внутри <script>. Я лично использовал бы другой внешний src для вашего другого тега, поэтому он будет кэшироваться в вашей памяти браузера клиента.

PHPglue 13 март 2014, в 23:23

0

Нет. ничего не меняется. Я понял смысл тегов, и я буду использовать другой внешний источник, когда я его заработаю. Но пока без улучшений. оба поля остаются отключенными.
Maxcot 14 март 2014, в 01:14
0

Попробуйте использовать $('#id') селекторы, просто чтобы увидеть, что происходит.
StackSlave 14 март 2014, в 02:00

0

Отключенный атрибут ввода HTML-формы не принимает параметр. Вы либо настроили его, либо нет, поэтому, чтобы исправить ваш код, полностью удалите атрибут disabled, если вы хотите включить это поле.

jacobroufa 13 март 2014, в 23:25

0

Извините, я просто недостаточно знаком с JavaScript, чтобы понять это. Вы имеете в виду .prop('disabled',true); Я полагаю?
Maxcot 14 март 2014, в 01:16
0

Не совсем уверен, почему вы говорите форму ... в этом примере ее нет ...?
Maxcot 14 март 2014, в 01:43
0

Теги <input> являются элементами формы, поэтому я назвал их таковыми. Рад видеть, что ты понял это ниже, хотя!
jacobroufa 14 март 2014, в 15:28

Показать ещё 1 комментарий

Ещё вопросы

Нет. ничего не меняется. Я понял смысл тегов, и я буду использовать другой внешний источник, когда я его заработаю. Но пока без улучшений. оба поля остаются отключенными.
Попробуйте использовать $('#id') селекторы, просто чтобы увидеть, что происходит.
Извините, я просто недостаточно знаком с JavaScript, чтобы понять это. Вы имеете в виду .prop('disabled',true); Я полагаю?
Не совсем уверен, почему вы говорите форму ... в этом примере ее нет ...?
Теги <input> являются элементами формы, поэтому я назвал их таковыми. Рад видеть, что ты понял это ниже, хотя!

Maxcot · Accepted Answer · 2014-03-13T23-13-00.000Z

Проделал это... как я уже упоминал, у меня нулевой опыт, поэтому я просто вернулся к примеру jfiddle и посмотрел на базовый код и нашел дополнительные строки $(window).load(function(){ with the $(window).load(function(){ }); в конце.

Полный код ниже.

<html>
<body>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'>  </script>
    <script type='text/javascript'>
        $(window).load(function(){
            $('input[type=text]').prop('disabled',true);
            $('input[name=radioknof]').on('click', function()
                {            
                    $(this).next().prop('disabled',true).siblings('input[type=text]').prop('disabled',false);
                }
            );
        });             
    </script>

    <input type="radio" name="radioknof" value="text1" />
    <input type="text" id="id1" disabled="true"/><br/><br/>
    <input type="radio" name="radioknof" value="text2"/>  
    <input type="text" id="id2"/> 
</body>