如何在列表框中没有选中时禁用按钮

Question

我是jquery的新手&我尝试了一些代码来禁用按钮。但是，它不适合我。
只有在从上述三个框中选择任意三个值（每个框一个值）并且我想启用“删除类别”&“保存类别”按钮的情况下，仅当存在时才想启用“添加类别”按钮第四个框中的任何值。

var one = $('.select-manage-category').val(); 
 
var two = $('.select-manage-category1').val(); 
 
var three = $('.select-manage-category2').val(); 
 
$('#add-category').click(function() { 
 
    $(
 
    '.select-manage-category, .select-manage-category1, .select-manage-category2' 
 
).each(function() { 
 
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>'); 
 
    }); 
 
}); 
 
$('#remove-category').click(function() {// check change here 
 
    var select = document.getElementById('selected-lst-values'); 
 
    
 
    for(var i=0;i<3;i++){ 
 
     select.removeChild(select.lastChild); 
 
    } 
 
}); 
 
$('#selected-lst-values>option').on("change",function(){ 
 
\t \t if($(this).val()===''){ 
 
\t \t $('#mnage-category-savebtn').attr({disabled:disabled}); 
 
\t \t 
 
\t } 
 
\t else{ 
 
\t \t $('#mnage-category-savebtn').removeAttr('disabled'); 
 
\t } 
 
\t })

.select-manage-category, 
 
.select-manage-category1, 
 
.select-manage-category2 { 
 
    width: 100px; 
 
    float: left; 
 
    margin-right: 4px; 
 
} 
 

 
p { 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
#selected-lst-values { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><select class="form-control select-manage-category" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select></div> 
 

 
<div><select class="form-control select-manage-category1" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select></div> 
 
<div><select class="form-control select-manage-category2" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select> 
 
</div> 
 
<p class="text-center color-red">You can add up to 20 categories</p> 
 
</div> 
 
<input id="add-category" name="add" type="button" value="Add Category" disabled> 
 
<input id="remove-category" name="add" type="button" value="Remove Category" disabled> 
 
<div><select id="selected-lst-values" class="form-group percent-100" size="5"> 
 
\t \t </select></div> 
 
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button" disabled><strong>Save Categories</strong> 
 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span> 
 
</button>

Answer 1

您需要更改事件添加到所有三个选择 - 管理类别列表，如片段所示您选择-LST-值列表！

希望能回答你的问题！

var one = $('.select-manage-category').val(); 
 
var two = $('.select-manage-category1').val(); 
 
var three = $('.select-manage-category2').val(); 
 

 

 
$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() { 
 
    var one = $('.select-manage-category').val(); 
 
    var two = $('.select-manage-category1').val(); 
 
    var three = $('.select-manage-category2').val(); 
 
    if (one && two && three) { 
 
    $("#add-category").prop("disabled", false); 
 
    } else { 
 
    $("#add-category").prop("disabled", true); 
 
    } 
 

 
}); 
 

 
$('#selected-lst-values').change(function() { 
 
    if ($(this).val()) { 
 
    $('#remove-category').prop("disabled", false); 
 
    $('#save-categories').prop("disabled", false); 
 
    } else { 
 
    $('#remove-category').prop("disabled", true); 
 
    $('#save-categories').prop("disabled", true); 
 
    } 
 
}); 
 

 
$('#add-category').click(function() { 
 
    $(
 
    '.select-manage-category, .select-manage-category1, .select-manage-category2' 
 
).each(function() { 
 
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>'); 
 
    }); 
 
}); 
 
$('#remove-category').click(function() { // check change here 
 
    var select = document.getElementById('selected-lst-values'); 
 

 
    for (var i = 0; i < 3; i++) { 
 
    select.removeChild(select.lastChild); 
 
    } 
 
    if ($('#selected-lst-values').val()) { 
 
    $('#remove-category').prop("disabled", false); 
 
    $('#save-categories').prop("disabled", false); 
 
    } else { 
 
    $('#remove-category').prop("disabled", true); 
 
    $('#save-categories').prop("disabled", true); 
 
    } 
 

 

 

 
}); 
 
$('#selected-lst-values>option').on("change", function() { 
 
    if ($(this).val() === '') { 
 
    $('#mnage-category-savebtn').attr({ 
 
     disabled: disabled 
 
    }); 
 

 
    } else { 
 
    $('#mnage-category-savebtn').removeAttr('disabled'); 
 
    } 
 
});

.select-manage-category, 
 
.select-manage-category1, 
 
.select-manage-category2 { 
 
    width: 100px; 
 
    float: left; 
 
    margin-right: 4px; 
 
} 
 

 
p { 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
#selected-lst-values { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><select class="form-control select-manage-category" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select></div> 
 

 
<div><select class="form-control select-manage-category1" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select></div> 
 
<div><select class="form-control select-manage-category2" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select> 
 
</div> 
 
<p class="text-center color-red">You can add up to 20 categories</p> 
 
</div> 
 
<input id="add-category" name="add" type="button" value="Add Category" disabled> 
 
<input id="remove-category" name="add" type="button" value="Remove Category" disabled> 
 
<div><select id="selected-lst-values" class="form-group percent-100" size="5"> 
 
\t \t </select></div> 
 
<button id='save-categories' class="btn btn-md btn-radius pi-btn prodetails-btn" type="button" disabled><strong>Save Categories</strong> 
 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span> 
 
</button>