选择时重置正确的答案

Question

我有一个<ul>，其中包含<li>，我有一个下拉选择菜单。

选择菜单有3个选项。在一个选项中，您可以选择多个区域，在另外两个选项中，您只能选择一个区域。

我想这样做如果我在多个区域并且选择了多个区域，当我将选择更改为仅选择一个区域时，它会将所有区域重置为不正确，这意味着没有人被选中。以下是我的代码：

HTML：

<div style="min-height:100%;min-width:100%;" class="multiple-choice" id="{{id}}">
    <div style="margin-left:15px;" class="form-inline">
        <label style="display:inline;">Type of Hotspot:</label>
        <div class="btn-group" style="margin-bottom:5px;">

            <button class="btn btn-indicator itemLayout hotspottype" data-model="type" style="width:175px;">&nbsp;</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu type-dropdown-menu">
                <li>
                    <a href="#" class="item">Place Token</a>
                </li>
                <li>
                    <a href="#" class="item">Select One Region</a>
                </li>
                <li>
                    <a href="#" class="item">Select Multiple Regions</a>
                </li>
            </ul>
        </div><!-- was missing from OP markup -->
    </div>   
</div>

的javascript：

var regionElement = $('#' + _me.UUID).find('.hostpostRegions');
var objsToMake = desired - current;
var start = current + 1;

if( objsToMake > 0 ){
    retrieve( _me.TemplateRegionsObj )
    .done( function( template ){
        var regionTemplate = template;
        var html;

        for( var i = start; i <= desired; i++ ){
            html = createHTML( regionTemplate, {id: UUID.generate(), sequence: i} );
            regionElement.append( html );
            numberItems();
        }
    })
} //END if

if( objsToMake < 0 ){
    var objsToDelete = Math.abs(objsToMake);

    for( var j = 0; j < objsToDelete; j++ ){
        regionElement.children('li:last').remove();
    }
} //END if

current = desired;

}; //END document.ready

var toggleStatus = function (el) {      
    var correctResponse = _me.ResponseDeclaration()[0].correctResponse.value;
    var currentId = el.attr('data-choice-id');
    var currentState = el.attr( 'data-status');

    if( currentState === 'correct' ) {
        el.attr( 'data-status', 'incorrect' ).attr( 'src', 'img/at_answercheck.png' );      
    } else {
        el.attr( 'data-status', 'correct' ).attr( 'src', 'img/at_answercheck_down.png' );
    } 
}; //END toggleStatus fn

var dependencies = function(){
    registerButton('#' + _me.UUID + ' .type-dropdown-menu li a', function(choice) {
        //debug.log('change2: ' + choice.text());
    });

    registerButton('#' + _me.UUID + ' .numRegions-dropdown-menu li a', function(choice) {
        var desiredRegions = Number(choice.text());
        addRegions(desiredRegions);
    }); 

    $( '#' + _me.UUID + ' .sortable' ).on('click', '.correctChoice', function(){
        var el = $(this);               

        var numAnswers = $( '#' + _me.UUID + ' .hotspottype').text();
        var currentState = el.attr('data-status');
        var currentId = el.attr('data-choice-id');
        var currentCorrectList = el.closest( 'ul' ).find('[data-status="correct"]');

        toggleStatus(el);


        if (currentState === 'incorrect') {
            if (numAnswers === 'Select One Region') {
                currentCorrectList.each( function( index, value ) {                             
                    if ($(this).attr('data-choice-id') !== currentId) {
                        toggleStatus($(this));
                    }
                });
            }               
        }

        return;

    }); 
}/*-- Was missing from OP code; assured a typo --*/