6

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

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/

4

3 回答 3

6 
<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);
});

小提琴

于 2013-05-15T17:43:18.073 回答
1

利用prop()

function enableStartBtn() {
   $('#startBtn').prop('disabled',false); //<----to remove  disable attr of the button
}

您需要在此处更改按钮的属性，而不仅仅是删除属性

于 2013-05-15T17:30:07.293 回答
0

包含在标题区域中

  1. 不是这个 =$('#coursetype').one('change', function() {
  2. 它应该= $('#coursetype').on('change', function() {
于 2019-06-10T05:25:10.220 回答