开发者

Re-enable radio inputs with a clear function

开发者 https://www.devze.com 2023-04-08 02:00 出处:网络
I\'ve tried a number of different things, including typical form reset and jQuery examples I\'ve found across the web with no luck.

I've tried a number of different things, including typical form reset and jQuery examples I've found across the web with no luck.

Screenshot:

Re-enable radio inputs with a clear function

The Goal:

I have a rankable list where a user is expected to rank items from 1-6 according to importance to them. If they select "2" for a certain row, we don't want to let them select "2" for another row. Here is the jQuery that's accomplishing this:

// Disable sibling radio buttons in form once an item is selected
$("input:radio").click(function() {
    var val = $(this).val();
    $(this).siblings("input:radio").attr("disabled","disabled");
    $("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});

The Issue:

This code seems to be working, with a couple of quirks.

  1. The code correctly disables sibling rows, but if the user wants to change, they're stuck. They can click "2" on a row, then click "3" on the same row, but that leaves all other "2" and "3" options disabled completely.
  2. The user needs a way to completely clear the form via a "start over" or "reset" button that apparently needs some special jQuery magic that I haven't been able to figure out yet.
  3. I took code referenced in another post from this url, but it seems to only half work on my site. I notice on that fiddle link that if you click "1", it also disables "2" and "3" on the same row, which doesn't ha开发者_高级运维ppen on my local development attempt. It does, however, permanently disable "2" in other rows if you were to click "2"...so I'm unsure why it works in the example but not my code (above).

There's got to be some easier way around this that I'm just not seeing here. I appreciate any help or code examples that might work along these lines.


Instead of outright disabling radio options that are not valid, you can instead take one of two approaches:

  1. When the user clicks an option, validate the option on the fly, i.e., that "3" is not already selected when you click another "3". If not valid, then display a popup to user and clear it out.
  2. When the user clicks an option, say a "3", then clear out all other "3" options so that only one is rated at that amount at a time.

Here is a sample code that will use method #2, clearing out all same value options whenever an option is clicked: http://jsfiddle.net/xy9wC/


From a users perspective, disabling these kinds of radio buttons may be very annoying to deal with as it forces the user to use two clicks instead of one while selecting something else.

A better alternative would be to "suggest" errors to the user, then enforce them on submit. For example, you could make the row with the invalid option red, then allow the user to discover the error and fix it themselves.

Re-enable radio inputs with a clear function

An even better way than that, use jQuery to create a sortable list.

http://jqueryui.com/demos/sortable/

-Sunjay03

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号