vendredi 25 septembre 2015

Condtionally disable button by Radio and Checkbox

I would like to conditionally disable a button based on a radio and checkbox combination. The radio will have two options, the first is checked by default. If the user selects the second option then I would like to disable a button until at least one checkbox has been checked.

I have searched at length on CodePen and Stack Overflow but cannot find a solution that works with my conditionals. The results I did find were close but I couldn't adapt them to my needs as I am a Javascript novice.

I am using JQuery, if that helps.

If needed: http://ift.tt/1VfG6eg

<form>
<div id="input-option1">First option: (required)
   <input type="radio" name="required" id="required" value="1" checked="checked">Yes
   <input type="radio" name="required" id="required" value="2">No
<div>

<div id="input-option2">Optionals:
   <input type="checkbox" name="optionals" id="optionals" value="2a">Optional 1
   <input type="checkbox" name="optionals" id="optionals" value="2b">Optional 2
<div>

<div id="input-option3">Extras:
   <input type="checkbox" name="extra" id="extra" value="3">Extra 1
<div>
   
<button type="button" id="btn">Add to Cart</button>
</form>

(Please excuse the code, it is in short hand for example!)

The form element IDs are somewhat fixed. The IDs are generated by OpenCart so I believe the naming convention is set by group, rather than unique. I cannot use IDs such as radio_ID_1 and radio_ID_2, for example; this is an OpenCart framework facet and not a personal choice.

Finally, in pseudo code I am hoping someone can suggest a JQuery / javascript solution along the lines of:

if radio = '2' then
   if checkboxes = unchecked then
      btn = disabled
      else
         btn = enabled
   end if
end if

Thanks in advance,

Gary




Aucun commentaire:

Enregistrer un commentaire