将选择输入链接到另一个输入答案

【问题标题】：Link Select Input to Another Input将选择输入链接到另一个输入
【发布时间】：2014-04-27 08:04:15
【问题描述】：

我希望我的输入使用 jQuery 链接到另一个输入，而所有 3 个输入都留在原处而不是消失。

Input 1 ->   Input 2 ->      Input 3 ->     
Selected    Choose option   Choose option

最后，当用户点击所有选择时，接下来会出现“Go按钮”，并且里面会有一个独特的超链接。

像这样：

Input 1 ->   Input 2 ->      Input 3 ->     Go Button (with unique hyperlink to each selection)
Selected    Choose option   Choose option

我见过这个Add input text when option selected，但这不是我需要的，而是相反。

类似http://jsfiddle.net/Mm2mu/2/ 但没有单选框。

在此处查看图片示例http://oi62.tinypic.com/kew60n.jpg

【问题讨论】：

这是你想要的吗？ jsfiddle.net/hMEad/4
是的。有点儿。但我需要输入始终保持原位，而不是在我选择一个选项后炫耀。另外，我如何显示“开始按钮”？
这就是你的想法？ jsfiddle.net/hMEad/19
是的，我看到了超链接。但我需要在第三次选择的输入之后显示它（不是文本类型方法）。
太棒了！我切换到一个选定的区域，它正在工作！谢谢！请写下您的评论作为解决方案，以便我对您进行排名！

标签： javascript jquery html

【解决方案1】：

一种解决方案是监视所有禁用特定类的输入。检查他们是否设置了值并最终在同一表单中启用具有同一类的下一个输入。

$(document).ready(function() {
    var $forms = $('form');

    $forms.each(function(){

        var $form = $(this);

        // scan each form for inputs with .input-step class
        var $steps = $(this).find('.input-step');
        if ( $steps.length > 0 ) {
            $steps.not(':first').prop('disabled', true);
            $steps.change(function(){
                var val = $(this).val();
                if ( val !== '' ) {
                    checkSubmitAvailability($form);
                    $form.find('.input-step:disabled:first').prop('disabled', false);
                }
            });
        }

    });
});

// Checks if all steps were made
// eventually enables submit actions
function checkSubmitAvailability($form) {
    if ($form.find('.input-step:disabled').length === 0 ) {
        $form.find('.input-finish').each(function(){
            $(this).removeClass('hidden');
            if ( typeof $(this).attr('href') !== 'undefined' ) {
                // element has attribute href, add data to this attribute
                var data = $form.find('.input-step');
                $(this).attr('href', $(this).attr('href') + '?' + data.serialize());
            }
        });
    }
}

我在这里使用一种形式作为范围和输入类“输入步骤”，但也可以是任何其他形式。

这是一个小提琴http://jsfiddle.net/hMEad/19/

【讨论】：

【解决方案2】：

我只是补充：

$('input').hide();

http://jsfiddle.net/guinatal/Mm2mu/4/

【讨论】：