如何在页面加载时更改 Lift 中 ajaxSubmit 的状态

How to change the state of a ajaxSubmit in Lift on page load

SHtml.ajaxSubmit 我正在使用带有 Lift 的 Scala。我正在尝试使用 CSS 绑定创建一个 SHtml.ajaxSubmit(),我希望根据外部 属性 启用或禁用它。到目前为止,我设法显示了提交并进行了所有其他连接,但我无法在创建 ajaxSubmit() 时调用 JS 方法,也无法以任何其他方式执行此操作。

"#myCheckbox" #> SHtml.ajaxCheckbox(btns.isChecked, btnState => checkboxClicked(btnState), "id" -> "myCheckbox") &
"#myBtn *" #> SHtml.ajaxSubmit("click me", btnClicked) 


我也有2种情况类来启用或禁用按钮状态:

case class Disable(id: String) extends JsCmd {
  def toJsCmd = "$('#"+id+"').children().prop('disabled', 'true');"
}

case class Enable(id: String) extends JsCmd {
  def toJsCmd = "$('#"+id+"').children().removeProp('disabled');"
}

最后我有一个变量告诉我是否应该启用它,但是在以 Lift 方式加载页面后我仍然无法更改按钮的状态。

这是 HTML 表单,其中我要禁用的按钮是:

    <lift:surround with="default" at="content" xmlns:item="http://java.sun.com/xml/ns/javaee">
        <div class='pageTitle'>Some title</div>
        <p>
            some text
        </p>
        <form data-lift="form.ajax">
            <div class="lift:MyScalaCodeBehind.btns">
                <table>
                    <tr>
                        <td>
                            <!-- checkbox -->
                            <div id="myCheckbox"/>
                            <label for="myCheckbox">some text</label>
                        </td>
                    </tr>
                    <tr>
                        <!-- button -->
                        <td id="myBtn"/>
                    </tr>
                </table>
            </div>
        </form>
</lift:surround>

顺便说一下,我测试过这些事件似乎对我不起作用?!?!

我已经成功地使用 JS 改变了按钮的状态。我无法在 Lift 中找到解决此问题的方法,这就是我将 Lift 与 JS 结合使用的原因。
我创建了一个自定义 JS 函数来完成这项工作,并在页面加载时调用它。因为我希望页面背后的所有业务逻辑都在 Scala 源代码中,所以我在创建表单时用 S.appendJs() 注册了这个命令。简而言之,这是代码:

S.appendJs(CustomOnLoadCmd()) // this is done when the form is initialized


下面是 CustomOnLoadCmd 的实现:

case class CustomOnLoadCmd() extends JsCmd {
  def toJsCmd = "$(document).ready(function() {\n" +
    "                if ($('#myCheckbox').prop('checked')) {\n" +
    "                    $('#myBtn').children().prop('disabled', 'true');\n" +
    "                } else {\n" +
    "                    $('#myBtn').children().removeProp('disabled');\n" +
    "                }\n" +
    "            });"
}

如果您遇到像我这样的问题并且没有任何其他解决方案,我希望这对您有所帮助。