2012-06-26 5 views
0

Я хочу отключить поле ввода и кнопку при щелчке по галочке.JS - jQuery - Включить Отключить поля формы с помощью флажка

Моя разметка:

<h4>Random or Not </h4> 

    <!-- Use Random Image --> 

    <label><input name="o99_aufu_options[o99_aufu_random]" id="o99_aufu_options[o99_aufu_random]" value="1" checked="checked" type="checkbox">Use Random Image ? <em></em></label><br> 

    <!-- If the above not checked - needs to be enabled -->       
    Upload Image <label for="upload_image"> <input id="upload_image" size="36" name="o99_aufu_options[o99_aufu_upload_image]" value="" type="text"> <input id="upload_image_button" value="Choose Image or upload" type="button"> </label> 

JQuery:

if (jQuery('#o99_aufu_options[o99_aufu_random]').is(':checked')) { 
     jQuery('#upload_image :input').attr('disabled', true); 
    } else { 
     jQuery('#upload_image_button,#upload_image :input').removeAttr('disabled'); 
    } 

хорошо - очевидно, если я задаю здесь - это не работает :-)

Fiddle:

http://jsfiddle.net/obmerk99/6jFMf/3/

Также в качестве бонусного вопроса - можно ли это сделать только с ИМЯ ввода, опустив идентификатор из разметки?

UPDATE I - рабочий раствор:

http://jsfiddle.net/obmerk99/6jFMf/20/

ответ

3

бонус вопрос - можно ли сделать это только с именем входа, опуская идентификатор из разметки?

Вы можете использовать любой атрибут в селекторе JQuery, включая имя:

$('[name="foo"]) 

Поскольку ваши имена имеют скобки, вы, вероятно, чтобы избежать их:

$('[name="o99_aufu_options\[o99_aufu_random\]"]') 

Вы также можете отнести их к конкретным элементам, если хотите, или объединить их с другими селекторами:

$('input.someClass[name="o99_aufu_options\[o99_aufu_random\]"]') 

Что касается вашего фактического вопроса, мое первое предположение ... неверно - ваша проблема в пробеле; вы пытались:

#upload_image:input 

вместо этого?

Моя вторая догадка также неправильно что проблема:

.prop('disabled', true); 

Вы пробовали:

.prop('disabled', 'disabled'); 

?

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

jQuery(function() { 
    jQuery('input[name="o99_aufu_options\[o99_aufu_random\]"]').click(function(){ 
     var isChecked = jQuery(this).is(':checked') ; 
     jQuery('#upload_image:input').prop('disabled', isChecked? 'disabled' : null); 
    }) 
}); 
+0

Thaks за ваши ответы, но при попытке на скрипке - это не похоже на работу. –

+0

Я обновил свой ответ; можете ли вы рассмотреть мое последнее предложение? – machineghost

+0

Спасибо, он отлично работает.Дело только в том, что при загрузке документа функция не контролировала его. Я добавил по умолчанию атрибут «disabled» (см. Здесь: http://jsfiddle.net/obmerk99/6jFMf/20/). BTW - вы знаете, что можете сохранить изменения скрипты, нажав «обновить», а затем опубликовать новую ссылку здесь? –

Смежные вопросы