<html>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="panel panel-body" style="min-height:256px">
<div class="col-md-3" id="mypartialviewdiv">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Steps to Approve Plans</h4>
</div>
<div class="panel-body" id="social">
<ul id="gallery" class="list-group selectedul"><li data-index="0" id="listitem" class="list-group-item"><a list-link="1" id="myreflink"class="btn btn-primary btn-block">Step 1: Business Plan Summary</a></li><li data-index="1" id="listitem" class="list-group-item"><a list-link="2" id="myreflink" class="btn btn-primary btn-block">Step 2: P&L Details</a></li><li data-index="2" id="listitem" class="list-group-item"><a list-link="3" id="myreflink" class="btn btn-primary btn-block">Step 3: Balance Sheet Details</a></li><li data-index="3" id="listitem" class="list-group-item"><a list-link="4" id="myreflink" class="btn btn-primary btn-block">Step 4: Final Step</a></li></ul>
</div>
</div>
</html>
<script>
$(document).ready(function () {
$('.panel').on('click', '.list-group li ', liClicked);
function PopulateLi() {
var jsonData = JSON.stringify({
//'PlanId': PlanId,
//'CompanyId': CompanyId
});
$.ajax({
type: "Get",
url: "/User/getmenus",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: jsonData,
success: function (data) {
//var s = '<option value="-1">Please Select Category</option>';
var s = "";
var j = 1;
for (var i = 0; i < data.length; i++) {
s += '<li data-index="' + i +'" id="listitem" class="list-group-item"><a list-link="' + j + '" id="myreflink" class="btn btn-primary btn-block">' + data[i].LinkName + '</a></li>';
j++;
}
$("#gallery").html(s);
$(document).ready(function () {
$('.panel').on('click', '.list-group li', liClicked);
});
function liClicked(event) {
if ($(event.currentTarget).data('index') != data.length) {
$('.selectedul li').eq($(event.currentTarget).data('index') + 1).addClass('disabledClass') // This can be done in loop for all the following li's. This will just disable the immediate li. But you get the idea.
}
}
},
error: function (msg) {
}
});
}
});
function liClicked(event){
if($(event.currentTarget).data('index')!=$('.list-group li').length){
$('.selectedul li').eq($(event.currentTarget).data('index')+1).addClass('enableClass') // Enabling the immediate nect li
for(var i=$(event.currentTarget).data('index') +2; i<$('.list-group li').length; i++){
$('.selectedul li').eq(i).addClass('disabledClass') // It will loop from the index + 2 that you clicked till the end of lis and all those will be disabled.
}
}
}
</script>
Это нормально работает. Я добавил классы только для включения и отключения. Вы можете отдохнуть от css. Делай то, что хочешь. Более того, вы также можете добавить угловые случаи.
Также я удалил href, потому что он показывал мне, что страница не найдена.
После того, как вы нажмете, вы увидите, что он добавляет класс включения для немедленного li и отключает класс для всех следующих lis после включения.
CSS для отключения:
.disabledClass{
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}