javascript - 动态禁用选择字段条件是如果我们更改另一个选择字段

问题描述

<div class="radio">
    <input type="radio" id="test2" name="specific_content" value="2">
    <label for="test2" class="parent_row">
        <div class="col-md-4">
            <select class="form-control" name="content_form[]">
                <option value="" selected disabled hidden>Select</option>
                <option value="category">Category</option>
                <option value="genre">Genre</option>
                <option value="cast">Cast</option>
            </select>
        </div>
        <div class="col-md-4">
            <div class="select-btn">
                <select name="content_type[]" multiple class="form-control">
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <select class="form-control condition-section" name="conditions[]">
                <option value="" selected disabled hidden>Select</option>
                <option value="1">AND</option>
                <option value="2">OR</option>
            </select>
        </div>
    </label>
</div>

jQuery

    $(document).on('change', "select[name='conditions[]']",  function(e){ 
        if($(this).val() != null && $(this).val() != "Select" && $(this).val() != "") {

        var selectedCat = [];
        $("select[name='content_form[]']").each(function(e){   
            if($(this).val()) {
                selectedCat.push($(this).val()); 
            }                             
        }); 

        //alert(JSON.stringify(selectedCat));

        var row = '<label class="parent_row">';
        row += '<div class="col-md-4">';
        row += '<select class="form-control" name="content_form[]">';
        row += '<option value="" selected disabled hidden>Select</option>';

        var unselectedCatPresent = false;
        if(selectedCat.indexOf('category') == -1) {
            row += '<option value="category">Category</option>';
            unselectedCatPresent = true;
        }
        if(selectedCat.indexOf('genre') == -1) {
            row += '<option value="genre">Genre</option>';
            unselectedCatPresent = true;
        }
        if(selectedCat.indexOf('cast') == -1) {
            row += '<option value="cast">Cast</option>';
            unselectedCatPresent = true;
        }   

        row += '</select>';
        row += '</div>';
        row += '</label>';

        if(unselectedCatPresent) {
            $(this).closest('label.parent_row').after(row);  
        }            
    } else if($(this).val() == "") {
        $(this).closest('label.parent_row').nextAll().remove();  
    }
});

以上是我的 HTML 和 jQuery 代码。

在改变AND/OR下拉列表时，我正在创建一个包含所有 3 个选择字段的新行，并且条件不应该是第一个下拉列表值。

这意味着如果我已经选择了类别，那么我无法在新创建的部分中再次选择类别。如果选择 AND/OR，我想禁用相同的下拉字段。

请查看下图了解更多详情。

正如您在上图中看到的，有两个部分，每个部分有 3 个下拉菜单。我的要求是，在第一部分中，如果选择了 AND/OR，那么我们不能从第一个下拉菜单中进行选择（在图像类别中）。但是我们可以从第 2 部分（在图像类型中）中进行选择，因为在第 3 个下拉列表中选择字段存在 AND/OR 选项未选择。一旦我们选择了 AND/OR，我们需要为该特定行的第一个选择字段设置只读选项。有人可以帮我吗？此外，笔记下拉菜单是动态的。

标签： javascriptjquery

javascript - 动态禁用选择字段条件是如果我们更改另一个选择字段

问题描述

解决方案

推荐阅读