Question

我有一个表，用户可以在其中添加行，但每行都有编号。现在，用户在实际开始添加行之前，在文本框中输入他/她想要添加的行数。下面是代码，如果已添加的行数超过用户输入的行数，则会停止添加行。

if (qnum > <?php echo (int)@$_POST['textQuestion']; ?>) { 
    return; 
}

示例：如果用户在文本框中输入数字5，则用户只能添加5行，如果用户尝试添加另一行，则不会添加任何行，因为用户无法添加超过5行。

现在以上工作正常。但是我想要做的是，当添加的行数达到其限制时，我希望它在顶部禁用textarea，所以我将代码更改为以下内容：

   if (qnum > <?php echo (int)@$_POST['textQuestion']; ?>) { 
      $('#questionTextArea').attr('disabled', 'disabled'); 
    return; 
}

问题是，如果我执行上面的代码，那么它会立即禁用textarea，这是不正确的。应该发生的是它应该允许用户添加允许添加的最大表行以及当用户到达该限制时，然后禁用textarea。有谁知道如何实现这个目标？

下面是添加表格行的函数：

function insertQuestion(form) {   

            if (qnum > <?php echo (int)@$_POST['textQuestion']; ?>) {
            $('#questionTextArea').attr('disabled', 'disabled'); 
    return;
}

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $qid = $("<td class='qid'>" + qnum + "</td>");




    $tr.append($qid);   
    $tbody.append($tr); 

    $(form).find('.numberOfQuestions').val(qnum);

    ++qnum;


}

以下是我要禁用的textarea：

<table id="question">
<tr>
    <td rowspan="3">Question:</td> 
    <td rowspan="3">
        <textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
    </td>
</tr>
</table>

Answer 1

你列出的一堆代码很好，但它似乎并不合适。

什么时候调用insertQuestion（）？是什么引发了这个？

这一行$(form).find('.numberOfQuestions').val(qnum);引用了一个类numberOfQuestions，但我没有看到该类在任何地方使用过？

这一行：var $tbody = $('#qandatbl > tbody');引用ID为qandatbl的对象，但是我没有在任何地方看到这个。

请提供完整的代码示例，我会尽力帮助您。

Answer 2

您可以使用jQuery中的.keyup（）事件处理程序来完成此任务。

如果元素包含超过允许的换行符数，则以下函数禁用该元素。

function limitRows() {
  var $this = $(this);
  var allowedRows = parseInt($this.attr("rows"));
  $this.prop("disabled", $this.val().split("\n").length > allowedRows);
}

$("#questionTextArea").keyup(limitRows);

然后，您可以使用PHP填充rows属性。

<textarea id="questionTextArea" 
  rows="<?php echo (int)@$_POST['textQuestion']; ?>" 
  cols="40" name="questionText"></textarea>

请参阅此处的工作示例：http://jsfiddle.net/e4SNa/

强烈的谨慎之词....

我建议不要采用这种方法，因为如果用户输入最后一行并意外按下“输入”，那么他们的字段就会被禁用，他们没有机会修复他们的错误。

如何在添加所有行后禁用textarea

2 个答案: