Limit the number of "favorites" in radio buttons

This topic has 8 replies, 2 voices, and was last updated 9 months ago by Anh Tran.

Creator

Topic
November 30, 2018 at 11:17 PM #12411

LFFprop
Participant

I am building a membersite where the members can specify what their specialties are, and what services they offer and which services not.

This is implemented by a large list of services (radio buttons), and for each service 3 options:
– favorite
– offered
– not offered

To avoid that a member marks everything as favorite, I want to limit the number of services that he can mark as favorite.

How to do that?

Also, I would like to maintain a counter visible on screen, so that he can see how many favorites are marked.
How would I do that?
Creator

Topic

Viewing 8 replies - 1 through 8 (of 8 total)

Author

Replies
December 2, 2018 at 12:45 PM #12438

Anh Tran
Keymaster

Hi,

I think this can be done with custom JavaScript only. So you need to enqueue a JS file, and in that file track the number of choice and show an alert when they select more.

December 5, 2018 at 12:26 AM #12476

LFFprop
Participant

OK, so that will be quite some work. Doubt whether it’s worth the efforts.
Thanks.

April 22, 2019 at 8:30 PM #14224

LFFprop
Participant

Hi Anh,

I have taken up this idea again to limit the number of favorites.
Currently the number of favorites is counted and that number is shown on screen.

What I want to do next is to dim the Save/Confirm button as long as the counter is higher than the number of allowed favorites.

How can I do that?

April 23, 2019 at 10:25 AM #14233
Anh Tran
Keymaster
In the latest version of the MB Frontend Submission plugin, I added some code to disable the submit button when it’s already clicked (to prevent duplicated submission). You can take it as a sample and write your own code, like this:
```
function count_favorites() {...}

$( 'input[type="radio"]' ).on( 'change', function() {
    var $submitButton = $( '.rwmb-form-submit' ).children( 'button' );
    if ( count_favorites() > 3 ) {
        $submitButton.prop( 'disabled', true );
    } else {
        $submitButton.prop( 'disabled', false );
    }
} );
```
April 23, 2019 at 11:11 PM #14251
LFFprop
Participant
Hi Anh,

To count the number of favorites, I have the following JS:
```
jQuery(document).ready(function( $ ){
$(document).ready(function () {
  $('.count input').attr('readonly', true);
  $('.radio').change(function () {
    var count=0;
    $('.radio input:checked').each(function(){
      if ($(this).val().replace(/V_/g,'')=="Specialiteit") {
        count += 1;
      }
    });
    $('.count input').val(count);
  });
});
});
```
That works nicely. (Btw: “Specialiteit” = Specialty, so I’m counting the specialties instead of favorites)

How to add your code there?
I created another JS file with the following code, but the submit button never gets disabled.
```
$( 'input[type="radio"]' ).on( 'change', function() {
    var $submitButton = $( '.rwmb-form-submit' ).children( 'button' );
    if ( .count() > 3 ) {
        $submitButton.prop( 'disabled', true );
    } else {
        $submitButton.prop( 'disabled', false );
    }
} );
```
April 25, 2019 at 10:26 AM #14272
Anh Tran
Keymaster
Please try this:
```
jQuery(document).ready(function( $ ){
  $('.count input').attr('readonly', true);
  $('.radio').change(function () {
    // Counting.
    var count=0;
    $('.radio input:checked').each(function(){
      if ($(this).val().replace(/V_/g,'')=="Specialiteit") {
        count += 1;
      }
    });
    $('.count input').val(count);

    var $submitButton = $( '.rwmb-form-submit' ).children( 'button' );
    if ( count > 3 ) {
      $submitButton.prop( 'disabled', true );
    } else {
      $submitButton.prop( 'disabled', false );
    }
  });
});
```
April 26, 2019 at 2:56 AM #14290

LFFprop
Participant

Unfortunately not. The submit button doesn’t get dimmed when more than 3 items are marked as specialty.

April 27, 2019 at 10:56 AM #14321

Anh Tran
Keymaster

Ah, I forgot to tell you that the code above only add or remove disabled attribute for the button. The disabled makes the button un-clickable. However, it doesn’t change the style. You might need to add something like this to the theme’s CSS:

button[disabled] { background: #999 }
Author

Replies

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Newsletter