Question

This morning I am fighting with an issue. I need to have users fill out a multi-step form. Certain steps of the form will have checkboxes that when set to ‘true’ should dynamically show an upload button.

Is this something that is relatively easy to do?

Update – Now you will all hate me.

My razor view has one line to generate each step.

@Html.EditorFor(x => currentStep,null,"")

So adding jquery in a straight forward manner isn’t an option I don’t think.

My ViewModel works like this. It dynamically generates a list of steps based on classes that implement the IStepViewModel interface. So… You see the issue maybe?

  [Serializable]
    public class WizardViewModel
    {
        
        public String AccountNumber { get; set; }
        public int CurrentStepIndex { get; set; }
        public Boolean IsInitialized { get { return _isInitialized; } }

        public IList<IStepViewModel> Steps { get; set; }

        private Boolean _isInitialized = false;

        public void Initialize()
        {
            try
            {
                Steps = typeof(IStepViewModel)
                    .Assembly.GetTypes().Where(t => !t.IsAbstract && typeof(UploadViewModel).IsAssignableFrom(t)).Select(t => (IStepViewModel)Activator.CreateInstance(t)).ToList();
                _isInitialized = true;
                //rewrite this.  get the profile and wire them up or something.
                this.AccountNumber = Tangible.Profiles.DR405Profile.CurrentUser.TangiblePropertyId;

            }
            catch (Exception e)
            {

                _isInitialized = false;
            }
        }
    }

Answer 1

you need to assign check events to each checkbox, then check the values and then show the button. Something like this (adapt for multiple check boxes)

$(init);
function init() {
    $("#Checkbox1").change(checkBoxChanged);//add check event to all check boxes
}

function checkBoxChanged(){
    if($("#Checkbox1").attr("checked"))//evaluate all checkbox conditions here
        $("#Button1").show();
    else
        $("#Button1").hide();
}

Note that these required ID values of you elements. If you want to set the event for all checkboxes at the same time you can use the class selector. So if all your checkboxes have a class of “MyCheckbox” you can assign same event to them all like…

$(".MyCheckbox").change(checkBoxChanged);

Not sure about this next bit but maybe it is worth trying something like this too…

if($(".MyCheckbox").attr("checked"))//could work to evaluate all checked (not sure though)
    $("#Button1").show();