Jquery 从属选择随值更改而更改,并在更改时禁用属性

Jquery 从属选择随值更改而更改,并在更改时禁用属性,jquery,drop-down-menu,Jquery,Drop Down Menu,我有一些ID从#no1到#no10的依赖选择。我试图实现的是清除链中所有可靠选择的价值 例如,如果#no1具有值,则#no2禁用的属性将被删除,用户可以选择一个值。同样的情况也发生在#no3(如果#no2不为空),#no4(如果#no3不为空),等等 我需要如果用户在#no2中选择“Empty”,那么#no3、#no4、#no5、#no6、#no7、#no8、#no9、#no10禁用属性将变为true,并且所选值设置为空 另外,我想知道是否有办法简化脚本,特别是if部分 我曾尝试对每个元素使用。

我有一些ID从
#no1到#no10
的依赖选择。我试图实现的是清除链中所有可靠选择的价值

例如,如果
#no1
具有值,则
#no2
禁用的属性将被删除,用户可以选择一个值。同样的情况也发生在
#no3(如果#no2不为空)
#no4(如果#no3不为空)
,等等

我需要如果用户在
#no2中选择“Empty”,那么#no3、#no4、#no5、#no6、#no7、#no8、#no9、#no10
禁用属性将变为true,并且所选值设置为空

另外,我想知道是否有办法简化脚本,特别是
if
部分

我曾尝试对每个元素使用
。click()
,但似乎不正确

$(document).on('change'、'no1、'no2、'no3、'no4、'no5、'no6、'no7、'no8、'no9、'no10',函数选择(){
var no1=$(“#no1”).val();
var no2=$(“#no2”).val();
var no3=$(“#no3”).val();
var no4=$(“#no4”).val();
var no5=$(“#no5”).val();
var no6=$(“#no6”).val();
var no7=$(“#no7”).val();
var no8=$(“#no8”).val();
var no9=$(“#no9”).val();
如果(no1!=null&&no1!=“”&&no1!=“空”){
$('#no2').prop(“禁用”,false);
}否则{
$('#no2').prop(“禁用”,真);
$('#no2').val('Empty');
$('#no3').val('Empty');
$('#no2').val('Empty');
$('#no2').val('Empty');
$('#no2').val('Empty');
$('#no2').val('Empty');
$('#no2').val('Empty');
}
如果(no2!=null&&no2!=“”&&no2!=“空”){
$('#no3').prop(“禁用”,false);
}否则{
$('#no3').prop(“禁用”,真);
$('#no3').val('Empty');
}
如果(no3!=null&&no3!=“”&&no3!=“空”){
$('#no4').prop(“禁用”,false);
}否则{
$('#no4').prop(“disabled”,true);
$('#no4').val('Empty');
}
如果(no4!=null&&no4!=“”&&no4!=“空”){
$('#no').prop(“禁用”,false);
}否则{
$('#no').prop(“禁用”,真);
$('#no').val('Empty');
}
如果(no5!=null&&no5!=“”&&no5!=“空”){
$('#no').prop(“禁用”,false);
}否则{
$('#no').prop(“禁用”,真);
$('#no6').val('Empty');
}
如果(no6!=null&&no6!=“”&&no6!=“空”){
$('#no').prop(“禁用”,false);
}否则{
$('#no').prop(“disabled”,true);
$('no7').val('Empty');
}
如果(no7!=null&&no7!=“”&&no7!=“空”){
$('#no8').prop(“禁用”,false);
}否则{
$('#no8').prop(“disabled”,true);
$('#no8').val('Empty');
}
如果(no8!=null&&no8!=“”&&no8!=“空”){
$('#no').prop(“禁用”,false);
}否则{
$('#no').prop(“disabled”,true);
$('#no9').val('Empty');
}
如果(no9!=null&&no9!=“”&&no9!=“空”){
$('#no10').prop(“禁用”,false);
}否则{
$('#no10').prop(“禁用”,真);
$('#no10').val('Empty');
}
});
$(“第1、第2、第3、第4、第5、第6、第7、第8、第9、第10位”)。单击()

主传送带订单
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.

实现这一点的简单方法是在所有选定元素上使用相同的
类。然后,您可以检索引发事件的索引,并根据所选值禁用/启用以下所有索引。试试这个:

$(document).on('change','.foo',function select(){
让$select=$('.foo');
让index=$select.index(this);
让$next=$select.eq(索引+1)
如果(this.value=='Empty'){
$next.val('Empty');
$select.filter(`:gt(${index})`).val('Empty').prop('disabled',true);
}否则{
$next.prop('disabled',false)
}
});

主传送带订单
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.
空的
1.
2.
3.

我想如果你发布了一篇关于你尝试的文章,你会得到更多的回复。现在这段代码太多,无法查看和提供任何帮助。@palaѕѕѕ,你完全正确。现在添加了一个演示链接,它做得很好,超级简单。谢谢!只是注意到了一些。。。如果在选择值后选择了与“空”不同的选项,则所有其他选项的值都将被清除。只有当值为空时,才需要清除下一个值并禁用Hanks Rory。这就解决了!如果可以的话,还有一个问题。我正在尝试在页面加载$(document).ready(function(){)后立即执行逻辑,在事件中也尝试了加载,但没有成功。知道我能做什么吗?如果希望在页面加载后立即执行此操作,请添加
.first().tri