How to make a time control readonly using jquery or javascript

Question

Am working on a certain ui and i have heard complains from the users that they are able to type in the time controls other numbers like 22323234 and save which is in need not a valid time. this is how i make my time control for both 12hr and 24hr systems

 var table_html = '<td style="min-width: 200px;"><input name="' + control_id + '" id="' + control_id + '" value="' + row_val + '" type="time" datetime="h:mm"></td>';

 var table_html = '<td style="min-width: 200px;"><input name="' + control_id + '" id="' + control_id + '" value="' + row_val + '" type="time" datetime="hh:mm"></td>';

i have tried to include the readonly property in both and i was still able to enter values in these controls. Any idea on how i will make them readonly will be highly appreciated

regards,

Jose

Answer 1

html code

<td style="min-width: 200px;"><input name="1" id="2" value="12345" type="time" datetime="h:mm"></input></td>

<td style="min-width: 200px;"><input name="1" id="2" value="3" type="time" datetime="hh:mm"></input></td>
<br/>
<p>disabled input</p>
<!-- to disable -->
<td style="min-width: 200px;"><input name="1" id="2" value="12345" type="time" datetime="h:mm" disabled></input></td>

<td style="min-width: 200px;"><input name="1" id="2" value="3" type="time" datetime="hh:mm" disabled></input></td>

http://jsfiddle.net/33sDR/

Answer 2

您可以尝试如下

$("#TIMEControlID").attr("disabled", true);