从下拉列表中选择项目时启用按钮答案

【问题标题】：Enable button when item is selected from dropdown list从下拉列表中选择项目时启用按钮
【发布时间】：2014-11-28 11:12:25
【问题描述】：

我有一个带有下拉列表和按钮的表单

 <button id="primaryTextButton" class="k-primary delete-button">Submit</button>

我只想在从列表中选择一个项目时启用按钮。

我该怎么做？

JSFiddle Demo

【问题讨论】：

jsfiddle.net/M3ukC/74

标签： jquery ajax kendo-ui

【解决方案1】：

这是你完整的 Jquery 代码：-

(function () {
$('#primaryTextButton').prop('disabled',true);   //disable button on page load
    var viewModel = kendo.observable({
        allowCustomValues: false,
        testData: new kendo.data.DataSource({
            data: [{
                id: 1,
                name: 'Apple'
            }, {
                id: 2,
                name: 'Banana'
            }, {
                id: 3,
                name: 'Orange'
            }, {
                id: 4,
                name: 'Kiwi'
            }]
        })
    });

    $('.combobox').kendoComboBox({
        dataSource: viewModel.testData,
        autoBind: false,
        dataTextField: 'name',
        dataValueField: 'id',
        suggest: true,
        placeholder: 'Select a Fruit',
        change: function (e) {
            $('#primaryTextButton').prop('disabled',false);   //enable button here
            var cmb = this;
            // selectedIndex of -1 indicates custom value
            if (cmb.selectedIndex < 0 && !viewModel.allowCustomValues) {
                cmb.value(null); // or set to the first item in combobox
            }
        }
    });

    kendo.bind('#example', viewModel);


})();

Fiddle.

【讨论】：

选择后在下拉列表中删除项目时，按钮仍然启用。
@Polppan..对不起，我没听懂你的意思......小提琴按照你的要求工作得很好......你还想要什么？？？
如果一个项目被选中，按钮被启用。但是如果我在选择后取消选择一个项目，按钮仍然是启用的。
@Polppan...那么在这种情况下，在 kendoComboBox 中必须有一些关闭事件，您必须自己找到，因为我从未使用过 kendoComboBox 并在该事件中放置禁用按钮代码..
好的。感谢和赞赏。

【解决方案2】：

按钮的启用和禁用可以在组合框本身的“更改”事件中完成。考虑到该按钮在开始时被禁用：

$('.combobox').kendoComboBox({
    change: selectionChanged,
    // other properties of combo-box
});


function selectionChanged(e){
            if(this.value() != null || this.value() != ""){
              $('#button').prop('disabled',false);
            }
            else{
            $('#button').prop('disabled',true);  
            }
          }

希望这会有所帮助。

【讨论】：