Question

我正在开发这个脚本，人们可以选择并按下旁边的另一组步骤。我有一个提交按钮，可以移动到下一步，我需要在默认情况下禁用它，并且仅当选择包含2个以上选项时才启用。

可以在此处找到JSFiddle：http://jsfiddle.net/fhu95/

这是我的代码：

JS：

    var selections = {
    "Television": false,
    "Internet": false,
    "Telephony": false,
    "Mobile": false,
    "opt5": false,
    "opt6": false,
    "opt7": false
};

$(document).ready(function() {
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
        }
    });




    $('#btn1').click(function() {
        $('#grp1').hide();
        $('#grp2').show();
    });

按钮的HTML：

<div class="btn"><button id="btn1">Next</button></div>

Answer 1

保留当前已选中选项的计数，并在每次单击选项后使用它来启用或禁用该按钮在这里小提琴：http://jsfiddle.net/Jtz8A/1/

var count = 0;
$(document).ready(function() {
    $('#btn1').prop('disabled', true); // Disable button on load
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
            count--; // Keep count
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
            count++; // Keep count
        }
        if(count > 1) // Use count to enable or disable button
           $('#btn1').prop('disabled', false);
        else
           $('#btn1').prop('disabled', true);
    });

Answer 2

您应该在每次修改后使用以下函数验证您的selection数组：

function processSelections()
{
  var enabled = 0;
  for( var id in selections )
  {
    if( selections[ id ] == true )
    {
       enabled ++;
    }
  }
  if( enabled >= 2 )
  {
    $("#button_id").prop('disabled', false);
  }
  else
  {
     $("#button_id").prop('disabled', true);
  }
}

并在对选择对象进行每次修改后调用此函数

if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
            processSelections();
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
            processSelections();
        }

在开始时调用一次，先设置为禁用。

Answer 3

这样做：

<强> HTML

<div id="grp1">
    <div class="option" id="opt1">opt1</div>
    <div class="option" id="opt2">opt2</div>
    <div class="option" id="opt3">opt3</div>
    <div class="btn"><button id="btn1">Next</button></div>
</div>
<div id="grp2">
    <div class="option" id="opt4">opt4</div>
    <div class="option" id="opt5">opt5</div>
    <div class="option" id="opt6">opt6</div>
    <div class="btn"><button id="btn2">Back</button></div>
    <div class="btn"><button id="btn3" disabled="disabled">Done</button></div>
</div>
<div id="grp3">
    <div id="done"></div>
    <div class="btn"><button id="btn4">Back</button></div>
</div>

<强> JS

var selections = {
    "opt1": false,
    "opt2": false,
    "opt3": false,
    "opt4": false,
    "opt5": false,
    "opt6": false
};
var optioncount=0;
$(document).ready(function() {
    $('.option').click(function(event) {
        var id = event.target.id;
        if (selections[id]) {
            $('#' + id).removeClass('checked-option');
            selections[id] = false;
            --optioncount;
        } else {
            $('#' + id).addClass('checked-option');
            selections[id] = true;
            ++optioncount;
        }
        if(optioncount>1) {
            $("#btn3").prop("disabled",false);
        }
        else {
            $("#btn3").prop("disabled",true);
        }
    });
    $('#btn1').click(function() {
        $('#grp1').hide();
        $('#grp2').show();
    });
    $('#btn2').click(function() {
        $('#grp2').hide();
        $('#grp1').show();
    });
    $('#btn3').click(function() {
        var content = 'Selected:<ul>';
        for (var i in selections) {
            if (selections[i]) {
                content += '<li>' + i + '</li>';
            }
        }
        content += '</ul>';
        $('#grp2').hide();
        $('#done').html(content);
        $('#grp3').show();
    });
    $('#btn4').click(function() {
        $('#grp3').hide();
        $('#grp2').show();
    });
});

<强> DEMO

Answer 4

如果我理解正确，您不必跟踪对象中的选定项目并添加/删除类。您可以使用单个prev/next按钮完成整个操作，如下所示：

HTML

<div id="grp1" class="selected">
  <div class="option" id="opt1">opt1</div>
  <div class="option" id="opt2">opt2</div>
  <div class="option" id="opt3">opt3</div>
</div>
<div id="grp2">
  <div class="option" id="opt4">opt4</div>
  <div class="option" id="opt5">opt5</div>
  <div class="option" id="opt6">opt6</div>
  <div class="btn">
    <button id="done" disabled>Done</button>
  </div>
</div>
<div id="grp3">
  <div id="selectedItems"></div>
</div>
<div class="btn">
  <button id="toggleBtn">Next</button>
</div>

JS

$(document).ready(function () {

  $('.option').click(function (event) {
    $(this).toggleClass('checked-option');
    if ($('.checked-option').length >= 2) $('#done').prop('disabled', false);
    else $('#done').prop('disabled', true);
  });

  $('#toggleBtn').click(function () {
    if ($('#grp1').hasClass('selected')) {
        $('.selected').hide().removeClass('selected');
        $('#grp2').show().addClass('selected');
        $(this).text('prev');
    } else if ($('#grp2').hasClass('selected')) {
        $('.selected').hide().removeClass('selected');
        $('#grp1').show().addClass('selected');
        $(this).text('next');
    } else {
        $('.selected').hide().removeClass('selected');
        $('#grp2').show().addClass('selected');
        $(this).text('prev');
    }
  })

  $('#done').click(function () {
    var $selections = $('.checked-option');
    var content = 'Selected:<ul>';
    $selections.each(function () {
        content += '<li>' + $(this).attr('id'); + '</li>';
    });
    content += '</ul>';
    $('#selectedItems').html(content);
    $('.selected').hide().removeClass('selected');
    $('#grp3').show().addClass('selected');
  });

});

隐藏/取消隐藏按钮取决于选择

4 个答案:

Demo