Question

我需要找到一种在四个文本输入之间切换的方法。

示例用法：

输入名称：

input1a
input1b
input2a
input2b

用户只能在输入a或输入b中输入文字。

如果用户点击input1a，那么他只能在input1a和input2a中输入文本。 Input1b和input2b的值将被删除和淡化（即：文本输入变为常规标签），反之亦然。

用户还可以在输入a和b之间切换。

是否有jquery代码执行此操作？任何帮助表示赞赏。

Answer 1

您可以在所有输入元素中添加“a”类，并在所有输入中添加“b”类。如果你这样做，你可以做这样的事情。

$('.a').on('click', function() {
    $('.b').attr('disabled', 'disabled');
    $('.a').removeAttr('disabled');
});
$('.b').on('click', function() {
    $('.a').attr('disabled', 'disabled');
    $('.b').removeAttr('disabled');
});

Answer 2

我不清楚你的html结构，但是这样的东西似乎就是你所描述的：

$(function() {
    $('body').on('click', 'label', function() {
        if ($(this).next('input').hasClass('disabled')) {
            $('input').toggleClass('disabled').val('');
        }
    });
});

在这种情况下，我假设你有标签，输入是彼此。 .disabled只是一个隐藏输入的类。

演示：http://jsfiddle.net/jtbowden/bKW4Q/

您可能不希望真正disable输入，因为它们不会触发点击事件。但是，既然你要清除它们，只需让你的残疾人课程变灰：

演示：http://jsfiddle.net/jtbowden/VWYpe/

这使您可以单击输入而不是标签。

Answer 3

如果你可以为输入添加类（例如.a和.b），你可以这样写：

var setActive = function(selector) {
  $('.a, .b').removeAttr('disabled');
  $(selector).attr('disabled', 'disabled');
}

$('.a').click(function(){
  setActive('.a');
});

$('.b').click(function(){
  setActive('.a');
});

..您可以根据需要调整选择器以适应您的情况，但您明白了。这不会非常优雅地处理已经活动的元素内的点击，但它应该做你想要的。

Answer 4

// Init
$('input').attr("disabled", "disabled");

// Bind click
$('label').click(function() {
    // Clear
    $('input').each(function() { $(this).val("").attr("disabled", "disabled"); });

    // Activate
    $(this).next('input').removeAttr("disabled");
});

<强>示例
http://jsfiddle.net/CZPbK/

jquery在输入之间切换

4 个答案: