I have the following code which enables a button when the che开发者_高级运维ckbox is checked.
http://jsfiddle.net/ERfWz/1/
The following is a snippet from the code I have in my HTML page. It's much the same however for some reason it's not working. I think I may have been looking at it for too long.
<script type='text/javascript'>
$(function() {
$('#agree').click(function() {
var satisfied = $('#agree:checked').val();
if (satisfied != undefined) $('#submit').removeAttr('disabled');
else $('#submit').attr('disabled', 'disabled');
});
});
</script>
<form>
<table>
<td colspan="5"><input type="checkbox" id="agree" name="agree" />I have read and agree to the terms and
conditions</td>
</tr>
<tr>
<td colspan="5" align="center"><input name="Submit" type="submit" id="submit" disabled value="I Accept.
Submit"/>
<label>
<input name="reset" type="reset" id="reset" value="Reset" />
<input type="hidden" name="ip" value=" echo $REMOTE_ADDR; " />
</label></td>
</tr>
<tr>
<td>*Required Fields</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="5"><h3></h3>
<p> </p></td>
</tr>
</table>
</fieldset>
</form>
You can also set disabled
with true
and false
, so you can simplify it down to:
$(function() {
$('#agree').change(function() {
$('#submit').attr('disabled', !this.checked);
});
});
Test it out here, note there was also some invalid markup going on resulting in some cross-browser inconsistencies, it should look something like this:
<form>
<table>
<tr><td align="center"><input type="checkbox" name="agree" id="agree">I agree Terms and Conditions</td></tr>
<tr><td align="center"><input type="submit" name="submit" id="submit" value="submit" disabled></td></tr>
</table>
</form>
Also the .change()
method's a bit better here, to ensure you have the correct state.
精彩评论