禁用文本框输入值答案

【问题标题】：disable textbox to enter values禁用文本框输入值
【发布时间】：2012-07-24 15:31:02
【问题描述】：

我有带日期选择器的文本框。根据我的要求，用户必须选择每月的第一个星期二或第二个星期二。因此，我使用以下代码禁用了其余日期，并且工作正常。

var dates_allowed = {
      '2012-07-24': 1,
      '2012-08-14': 1,
      '2012-08-21': 1,
      '2012-09-11': 1,
  '2012-09-18': 1,
      '2012-10-09': 1,
      '2012-10-16': 1
};
$("#" + webinarDate.id).datepicker({
    // called for every date before it is displayed
    beforeShowDay: function(date) {

        // prepend values lower than 10 with 0
        function addZero(no) {
            if (no < 10){
              return "0" + no;
            }  else {
              return no; 
            }
        }

        var date_str = [
            addZero(date.getFullYear()),
            addZero(date.getMonth() + 1),
            addZero(date.getDate())      
        ].join('-');

        if (dates_allowed[date_str]) {
            return [true, 'good_date', 'This date is selectable'];
        } else {
            return [false, 'bad_date', 'This date is NOT selectable'];
        }
    }
});

但问题是用户可以在文本框中输入日期而不是使用 datepicker（我不想要那个）。如何限制用户从日期选择器中选择日期，而不是手动输入。希望你能理解..

【问题讨论】：

必须使用日期选择器吗？如果唯一的选择是每月的第一个或第二个星期二，那么下拉菜单可能是更好的选择？
注意：您还需要确保您有服务器端验证来检查值，而不是仅仅依赖于被禁用的字段。
@TheZ“已禁用”文本框不会在 POST 上发送，因此只读是正确的选择。
@Amalea 啊，有道理。

标签： jquery

【解决方案1】：

你的意思是这个？

您可以使用以下命令将日期选择器输入文本设置为只读。

在你的情况下将是这个元素：$("#" + webinarDate.id)

<input type='text' id='datepickerTxt' readonly='true'>

或者：

$("#datepickerTxt").attr('readonly', 'true');

或者：

$("#datepickerTxt").keypress(function(e){ e.preventDefault(); });

在现代 jQuery 版本中：

$("#datepickerTxt").prop('readonly', 'true');

【讨论】：

【解决方案2】：

日期选择器在这里是正确的解决方案吗？感觉更像是一个下拉列表，可以选择接下来的许多日期。

如果需要，您可以使用 onblur 定位用户打字并进行测试。

或者如果触发了 onfocus，则禁用键盘输入。

【讨论】：

【解决方案3】：

我会看到这个答案： jQuery Date Picker where text input is read only 添加onclick事件并禁用输入

【讨论】：

【解决方案4】：

在 ASPX 中 - 拖放 AJAX 日历扩展器，将 ControlToValidate 更改为 txt_Date（日期文本框）的 ID，将 Enable Client Script 更改为 False

然后

在 TextBox 属性中，只需将 Read-Only 属性更改为 TRUE..

（确保您已经拖动 ScriptManager 以使 Extenders 工作）...

现在您只能使用日历扩展器更改日期，因此无法输入无效日期..

【讨论】：