JavaScript:禁用<;按钮>;直到选择值为止
我正在尝试为html5表单实现一个javascript代码,该代码将负责禁用/启用按钮,直到选择元素未被选中。代码如下: HTML:JavaScript:禁用<;按钮>;直到选择值为止,javascript,jquery,html,button,selection,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">Sel
<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>
我在代码中使用的是jquery1.9.1,看起来一切正常,但当选择值时,按钮不启用。任何帮助都将不胜感激
更新:很抱歉,伙计们忘了提到我也在使用JQuery Mobile 1.3.0,因此不包括JQuery Mobile,它就可以工作,但使用JQuery Mobile则不行。
以下是JSFIDLE版本:使用
function enableStartBtn(){
$('startBtn').prop('disabled',false)//
包括在标题区域中
不是this=$('#coursetype')。one('change',function(){
它应该=$('#coursetype')。在('change',function()上{
使用.prop('disabled',false)
启用它对我来说很好,尽管我同意你应该使用prop
来启用它。你也可以将“disabled”添加到标记中,这样用户就不能重新选择它:
如果你试图将其禁用(基于所选项目),您可以使用:。它使用一个特殊的data-*
属性来针对未实施的课程,而不是将其存储在JS@lan请看一下我问题的update
部分。很好。尽管在“未实现”上添加一个特殊的data-*
属性可能是有意义的当然。还有,你为什么使用.one()
?为什么使用.one()
?根据课程可用性启用/禁用按钮不是更好吗?一旦更改了选择,按钮将启用,并且您无法再次选择第一个选项,因此无需多次执行事件处理程序。但是如果课程不可用,我不希望启用按钮。如果用户选择课程3。我想这是一个UI问题。@DerekHenderson-我可能也会这样做,但是你不需要按钮,你可以在更改事件中完成所有操作,因为如果在课程不可用时禁用按钮,则不需要按钮来告诉你课程是否可用?无论如何,question是为了在第一次更改select时启用按钮,而让事件处理程序运行一次以上是不必要的!
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');
}
}
function enableStartBtn() {
$('#startBtn').prop('disabled',false); //<----to remove disable attr of the button
}
<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);
});