当 select 其中 select 名称相同但值不同时禁用兄弟元素

Question

我的网站有四个 html select 具有相同的 select 名称和不同的值。

<td>
    <select name="bali" disabled>
        <?php
            $query="select * from bali_intro";
            $result=$con->query($query) or die($con->error);
            while($row=$result->fetch_assoc()){
            $heading=$row['heading'];
        ?>
        <option value="<?php echo $heading?>"><?php echo $heading?></option>
        <?php } ?>
    </select>
</td>

<td>
    <select name="bali" disabled>
        <?php
            $query="select * from veg_intro";
            $result=$con->query($query) or die($con->error);
            while($row=$result->fetch_assoc()){
            $heading=$row['heading'];
        ?>
        <option value="<?php echo $heading?>"><?php echo $heading?></option>
        <?php } ?>
    </select>
</td>

<td>
    <select name="bali" disabled>
        <?php
            $query="select * from fruit_intro";
            $result=$con->query($query) or die($con->error);
            while($row=$result->fetch_assoc()){
            $heading=$row['heading'];
        ?>
        <option value="<?php echo $heading?>"><?php echo $heading?></option>
        <?php } ?>
    </select>
</td>

<td>
    <select name="bali" disabled>
        <?php
            $query="select * from pasu_intro";
            $result=$con->query($query) or die($con->error);
            while($row=$result->fetch_assoc()){
            $heading=$row['heading'];
        ?>
        <option value="<?php echo $heading?>"><?php echo $heading?></option>
        <?php } ?>
    </select>
</td>

我想在 selected 时禁用同级 select 元素。我使用以下代码解决此问题

$('select[name="bali"]').click(function(){
    $(this).removeAttr('disabled').siblings().attr('disabled','disabled');
});

但是没用。 jquery 适合这个问题的函数是什么？

Answer 1

select 没有兄弟姐妹，它位于有兄弟姐妹的 TD 元素内

var elems = $('select[name="bali"]').on('change', function(){
    $(this).prop('disabled', false)
    elems.prop('disabled', true);
});

点击时启用 select 元素似乎不是个好主意？

Answer 2

我认为 this JSFiddle 是您的目标。

$('select[name="bali"]').change(function(){
    $("select[name='bali']").attr('disabled','disabled');
    $(this).removeAttr('disabled');
});

选择的对象不是兄弟姐妹，因此未找到它们。

Answer 3

删除html中添加的默认禁用属性，它不会触发点击事件。很可能它会解决您的问题。

当 select 其中 select 名称相同但值不同时禁用兄弟元素

Disable sibling element when one is select where select name are same but value is different

jquery

css

disabled-input