gpt4 book ai didi

javascript - removeClass 也适用于下拉父级

转载 作者:行者123 更新时间:2023-12-03 01:15:26 27 4
gpt4 key购买 nike

感谢这里的所有贡献者和 w3schools,我终于成功了。

我有 2 个菜单 - TermPayTermTerm 始终高于 PayTerm。默认的 disabled 状态是完美的。当我点击 Term 中的任何值时,就会出现问题;下拉父级(其他 2)丢失其 disabled 标记,因此它变得可点击。我希望它保持禁用状态,直到 Term 的值最接近 PayTerm

<强> JSFiddle DEMO

HTML

<div class="container">
<div class="row">
<div class="col-12">
<div class="k__form">
<h2>Term</h2>
<div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-secondary w-100 active">
<input type="radio" name="options" value="10" id="option1" autocomplete="off"> 10
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="15" id="option2" autocomplete="off"> 15
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-secondary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other 1</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="k__form">
<h2>Pay Term</h2>
<div id="payterm" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-secondary w-100 active">
<input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-secondary w-100 dropdown-toggle disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other 2</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p>&nbsp;</p>
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" pattern="[0-9]*" id="adbr-rt" value="10" class="form-control" required>
<label class="form-control-placeholder" for="adbr-rt">Term</label>
</div>
</div>
<div class="col-12">
<div class="form-group">
<input type="number" pattern="[0-9]*" id="adbr-rpt" value="5" class="form-control" required>
<label class="form-control-placeholder" for="adbr-rpt">Pay Term</label>
</div>
</div>
</div>
</div>
</div>
</div>

JS:

$('#term :radio').on('change', function() {
document.getElementById("adbr-rt").value = $(this).val();
var baseValue = parseInt($(this).val());

var option2List = $('#payterm :radio').filter(function() {
return parseInt($(this).val()) >= baseValue; //getting only the values lesser to the current and equal to it
});
$('#payterm :radio').removeAttr('disabled'); //resetting the option2
$('#payterm label').removeClass('disabled'); //resetting the labels
option2List.prop('disabled', 'disabled'); //disabling the lesser values
$.each(option2List, function() {
$(this).closest('label').addClass('disabled'); //add the disabled class to labesl
});
$('#payterm :radio:enabled').first().click();
});
$('#payterm :radio').on('change', function() {
document.getElementById("adbr-rpt").value = $(this).val();
});
$('#term label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});
$('#payterm label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});

最佳答案

在“var option2List = $('#payterm :radio').filter(function() {”之后parseInt($(this).val()) 为“Other2”返回 NaN,因此“parseInt($(this).val()) >= baseValue” retuen false

在此之后

var baseValue = parseInt($(this).val());

var v = 0;
var option2List = $('#payterm :radio').filter(function(i) {
if(i == 2){
v = parseInt($(this).val());
}
return ((!parseInt($(this).val()) && (v != (baseValue+5 && baseValue-5)) ) ? true :
parseInt($(this).val()) >= baseValue);

关于javascript - removeClass 也适用于下拉父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52038595/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com