jQuery: установите флажок при нажатии поля загрузки - PullRequest
Новая
       9

jQuery: установите флажок при нажатии поля загрузки

0 голосов
/ 15 мая 2010

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

Проблема в том, что Я постоянно забываю вручную активировать флажок , и загруженное изображение фактически не заменяет существующее, потому что без установленного флажка принимающий файл PHP не (по замыслу) обрабатывает загруженное имя файла,Я подозреваю, что у пользователей будет та же проблема, и я хочу, чтобы это не происходило, уменьшив количество необходимых шагов.Одним из решений было бы установить флажок с помощью jQuery при каждом нажатии поля загрузки.Так почему же это не работает: 

$('#image_req').click(function () {
    if ($('#checkbox_req').attr('checked',true)) {
        $('#checkbox_req').removeAttr('checked');
        alert('Unchecked');
    } else if ($('#checkbox_req').attr('checked',false)) {
        $('#checkbox_req').attr('checked','checked');
        alert('Checked');
    }
});

Данный HTML-код выглядит следующим образом: 

<input id="image_req" name="local_filename" type="file" />
<input id="checkbox_req" name="replace_image" value="yes" type="checkbox" />

Ответы [ 5 ]

0 голосов
/ 17 мая 2010

Я закончил тем, что использовал скрытый ввод, который был очевидным решением, и которое я реализовал ранее, но как-то упустил из виду на этот раз. Но я ценю все разнообразные и полезные ответы. Стек переполнен камнями.

0 голосов
/ 16 мая 2010

Ваши условия if не работают должным образом, потому что вы на самом деле assigning значений вместо их получения. Попробуйте это: 

$('#image_req').click(function () {
    var checkbox = $('#checkbox_req');
    if (checkbox.is(':checked')) {
        checkbox.removeAttr('checked');
        alert('Unchecked');
    } else {
        checkbox.attr('checked', 'checked');
        alert('Checked');
    }
});

Но имеет ли это смысл? Когда пользователь сначала устанавливает флажок вручную, а затем нажимает кнопку загрузки, он снова не проверяется.

Я бы проверил это по умолчанию, установив атрибут checked в вашем HTML. Если пользователь не хочет заменять изображение, он может снять его вручную.

PS: А как насчет простого превращения флажка в скрытое поле, если вы действительно хотите, чтобы этот флажок был установлен всегда? 

<input id="checkbox_req" name="replace_image" value="yes" type="hidden" />

Если это невозможно по какой-либо причине, вот еще одна идея с тем же эффектом: установите флажок с помощью javascript и скройте его через CSS.

0 голосов
/ 15 мая 2010

Не можете ли вы включить значение по умолчанию в скрытый ввод (type="hidden")? Таким образом, когда вы отправляете форму, вы знаете значение по умолчанию. Если ничего не меняется, используйте значение по умолчанию или ничего не делайте, а если файл загружен (отметьте $_FILES), используйте новый файл.

0 голосов
/ 16 мая 2010

@ Arne

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

$('#image_req').mouseup(function () {
    if ($('#checkbox_req').attr('checked',false)) {
        $("input[name='replace_image']").attr('checked', true);
    }
});

@ Дуг: спасибо за подсказку

0 голосов
/ 15 мая 2010

возможно, что $ конфликтует с существующей библиотекой JavaScript в вашей CMS. Я должен был сделать что-то подобное с полями выбора и узнал о jQuery.noConflict: 

jQuery.noConflict();

jQuery(document).ready(function() {
    //preselect sectionid
    jQuery('select[name="sectionid"] option[value="29"]').attr("selected", true);
    jQuery('select[name="sectionid"] option[value="29"]').trigger("change");
    jQuery('select[name="access"] option[value="1"]').attr("selected", true);
});

после "jQuery.noConflict ();" Вы можете использовать «jQuery» вместо «$»

также в моем случае мне пришлось инициировать событие изменения, потому что содержимое поля «доступ» зависит от того, что выбрано в «поле выбора раздела»

...