JavaScript:禁用 <button> 直到选择值

标签 javascript jquery html button selection

我正在尝试为 html5 表单实现一个 javascript 代码,该代码将负责禁用/启用按钮,直到未选择选择元素。这是代码:

HTML:

<form name="courseForm" id="courseForm">
    <select name="coursetype" id="coursetype" onchange="enableStartBtn()">
        <option value="0" selected="selected">Select here...</option>
        <option value="1">CourseName 1</option>
        <option value="2">CourseName 2</option>
        <option value="3">CourseName 3</option>
    </select>
<button type="button" id="startBtn" disabled="disabled" onclick="Test()">Start</button>
</form>

JavaScript:

function enableStartBtn() {
    $('#startBtn').removeAttr('disabled');
}

function Test() {
    var form = $('#courseForm');
    var course = $('#coursetype', form).val();
    if (course == '0') {
        alert('Select the course first!');
    } else if (course == '1') {
        alert('CourseName 1 is selected!');
    } else if (course == '2') {
        alert('CourseName 2 is selected!');
    } else if (course == '3') {
        alert('This course is not implemented yet');
    }
}

I'm using JQuery 1.9.1 in my code, everything looks like ok, but the when value is selected the button is not enables.任何帮助将不胜感激。

更新:对不起,大家忘了说我也在使用 JQuery Mobile 1.3.0,所以不包括 jquery mobile 也可以,但使用 jquery mobile 就不行。 这是 jsfiddle 版本:http://jsfiddle.net/dozent/UVQ4m/

最佳答案

<form name="courseForm" id="courseForm">
    <select name="coursetype" id="coursetype">
        <option value="0" disabled>Select here...</option>
        <option value="1">CourseName 1</option>
        <option value="2">CourseName 2</option>
        <option value="3">CourseName 3</option>
    </select>
    <button type="button" id="startBtn" disabled>Start</button>
</form>

然后做:

var courses = ['1','2']; // available courses

$('#coursetype').one('change', function() {
     $('#startBtn').prop('disabled', false);
});

$('#startBtn').on('click', function() {
    var val = $('#coursetype').val(),
        msg = $.inArray(val, courses) != -1 ? 'CourseName '+val+' is selected!' : 'This course is not implemented yet';
    alert(msg);
});

FIDDLE

关于JavaScript:禁用 <button> 直到选择值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16571412/

相关文章:

javascript - 使用 axios 修改 vue.js 中的数据变量

javascript - FancyBox - "Don' t 再次显示此消息“按钮?

jquery - 如何设置 Bootstrap Datepicker 的第一天和第一周

php - 将数据从输入表单传递到 Laravel 中的 ajax

html - 网站在 Firefox 中看起来不太好

html - 正确的html页面结构?标题/内容中应包含什么?

javascript - 如何在 Javascript 中停止传播

javascript - i18n 如何在 Javascript 中工作?

javascript - 传单中两条线的交点

jquery - 使用 jQuery 操作 WordPress Thickbox 中的数据