0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 01:22:07 +01:00

Enable / disable submit button once a selection is made

This commit is contained in:
Matt Westcott 2023-01-17 15:53:12 +00:00
parent f4125d04e0
commit 32f8c78b58
7 changed files with 35 additions and 5 deletions

View File

@ -102,6 +102,16 @@ const PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
});
}
function updateMultipleChoiceSubmitEnabledState() {
// update the enabled state of the multiple choice submit button depending on whether
// any items have been selected
if ($('[data-multiple-choice-select]:checked', modal.body).length) {
$('[data-multiple-choice-submit]', modal.body).removeAttr('disabled');
} else {
$('[data-multiple-choice-submit]', modal.body).attr('disabled', true);
}
}
function ajaxifyBrowseResults() {
/* Set up page navigation links to open in the modal */
$(
@ -133,6 +143,11 @@ const PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
});
wagtail.ui.initDropDowns();
updateMultipleChoiceSubmitEnabledState();
$('[data-multiple-choice-select]', modal.body).on('change', () => {
updateMultipleChoiceSubmitEnabledState();
});
}
ajaxifyBrowseResults();
initTooltips();

View File

@ -228,6 +228,21 @@ class ChooserModalOnloadHandlerFactory {
// Reinitialise any tooltips
initTooltips();
this.updateMultipleChoiceSubmitEnabledState(modal);
$('[data-multiple-choice-select]', containerElement).on('change', () => {
this.updateMultipleChoiceSubmitEnabledState(modal);
});
}
updateMultipleChoiceSubmitEnabledState(modal) {
// update the enabled state of the multiple choice submit button depending on whether
// any items have been selected
if ($('[data-multiple-choice-select]:checked', modal.body).length) {
$('[data-multiple-choice-submit]', modal.body).removeAttr('disabled');
} else {
$('[data-multiple-choice-submit]', modal.body).attr('disabled', true);
}
}
modalHasTabs(modal) {

View File

@ -28,7 +28,7 @@
{% include 'wagtailadmin/chooser/_browse_results.html' %}
</div>
<input type="submit" value="{% trans 'Confirm selection' %}" class="button" />
<input type="submit" data-multiple-choice-submit value="{% trans 'Confirm selection' %}" class="button" />
</form>
{% else %}
<div class="page-results">

View File

@ -1,4 +1,4 @@
{% load i18n %}
<td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
<input type="checkbox" name="id" value="{{ value }}" {% if not instance.can_choose %}disabled{% endif %} title="{% blocktrans trimmed with title=instance %}Select {{ title }}{% endblocktrans %}">
<input type="checkbox" data-multiple-choice-select name="id" value="{{ value }}" {% if not instance.can_choose %}disabled{% endif %} title="{% blocktrans trimmed with title=instance %}Select {{ title }}{% endblocktrans %}">
</td>

View File

@ -1,4 +1,4 @@
{% load i18n %}
<td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
<input type="checkbox" name="id" value="{{ value }}" title="{% blocktrans trimmed with title=instance %}Select {{ title }}{% endblocktrans %}">
<input type="checkbox" data-multiple-choice-select name="id" value="{{ value }}" title="{% blocktrans trimmed with title=instance %}Select {{ title }}{% endblocktrans %}">
</td>

View File

@ -51,7 +51,7 @@
{% include view.results_template_name %}
</div>
<input type="submit" value="{% trans 'Confirm selection' %}" class="button" />
<input type="submit" data-multiple-choice-submit value="{% trans 'Confirm selection' %}" class="button" />
</form>
{% else %}
<div id="search-results" class="listing">

View File

@ -12,7 +12,7 @@
<div class="image">{% image image max-165x165 class="show-transparency" %}</div>
</a>
<h3>
<input type="checkbox" name="id" value="{{ image.id }}" title="{% blocktrans trimmed with title=image.title %}Select {{ title }}{% endblocktrans %}">
<input type="checkbox" data-multiple-choice-select name="id" value="{{ image.id }}" title="{% blocktrans trimmed with title=image.title %}Select {{ title }}{% endblocktrans %}">
{{ image.title|ellipsistrim:60 }}
</h3>
{% else %}