以jQuery UI SelectMenu插件为主题的选择列表上的jQuery验证

这是另一个问题的后续问题；首先，我需要在一个普通的选择列表上进行验证。第一部分可用

我有一个选择菜单，上面有一些jQuery验证逻辑。我使用的是ASP.NET MVC，因此有一些自定义属性，但现在我只希望验证能够正常工作，因此属性并不重要

我设法让它起作用了实际上是Gajotres解决的不是我

现在我想将其扩展到jQuery UI selectmenu插件仍然是非官方的-计划在下一版本的jQuery UI中正式发布，但您可以在这里找到它：

我已经设法使样式正常工作，但现在验证再次失败。我在这里发布我的代码和一把小提琴。请注意，这里发布的代码不止这些，只是为了简洁

预期行为 当默认选项是“选择”菜单中当前选定的值时，用户不能提交表单

这里是所有相关文件的链接，以防你出于某种原因不想尝试小提琴。 jQuery jQuery验证插件 选择菜单分叉 Javascript HTML ​在selectmenu.CSS文件中可以找到选择菜单主题的其他CSS，可在此处找到

---

您可以将这段代码添加到jQuery中：

//set the submit button disabled
$('input[type="submit"]').attr('disabled','disabled');

//trigger a check of the value when the selectbox is changed
$('#select_list').change(function(){
    if($(this).val() != 'default'){
       $('input[type="submit"]').removeAttr('disabled');
    }
});

---

我知道您的新实现存在什么问题。我自己也有同样的问题

验证插件无法使用css显示验证元素：无。为了让这个插件工作，原始选择必须隐藏在自定义插件下面

我举了一个例子来说明这一点：

您应该注释/取消注释此css组以消除差异：

    #select_list {
         display: block !important;
    }

现在，从我所能看到的，这个插件不是为了覆盖旧的选择框而创建的，无论原始显示是块还是无。如果你不介意的话，看看我正在起诉的插件。它将覆盖旧的选择框，即使其显示设置为“块”：

编辑：

还有另一个解决办法。您需要使用css。将此设置为选择框：

    #select_list {
         display: block !important;
         visibility: hidden;
    }

---

现在，您需要用新的选择框覆盖旧的选择框，或者至少将新的选择框浮动到左侧。

您可能希望签出以避免一些麻烦。这看起来确实很酷，不幸的是，我已经足够致力于jQuery UI，我不确定现在是否可以进行更改。Hrnm，这似乎没有做到。我将它从$'input[type=text]'更改为$'select'，因为我没有任何文本框-这会在一开始停止，但如果他们重新选择默认值，它不会禁用表单输入-我尝试在if子句中对disable进行重新添加，但也不起作用。在这里更改了fiddle：尝试使用您提供的id对您的选择列表进行寻址：$'select_list'抱歉，我没有在val后面添加括号：val是一个函数，因此添加如下括号：val。。。我正在更新我的答案，它在这里起作用是的，似乎起作用了。我仍然不得不添加if子句：-这似乎有点麻烦。我希望有一种方法可以让jQueryValidate使用它，但它似乎必须是手动的。。。是的，我试过DropKick，觉得很沮丧。使用jQuery验证无法避免这个问题？我在答案中添加了一个编辑部分。这是一个最简单的解决方案，但您需要玩一点，为新的选择框创建一个完美的位置。Youch。我想知道jQuery官方Fork是否可以以不同的方式展示它。。。非常感谢你的帮助，我现在知道问题的原因了。这两个答案都有可能获得积分吗？快速更新：您让我找到了一个完美的解决方案-工作小提琴在这里：-jQuery验证可以选择覆盖它忽略的内容。我在这里发现：-在这里：当我准备好开始实施这个不引人注目的部分时，我可能会来找你。

//set the submit button disabled
$('input[type="submit"]').attr('disabled','disabled');

//trigger a check of the value when the selectbox is changed
$('#select_list').change(function(){
    if($(this).val() != 'default'){
       $('input[type="submit"]').removeAttr('disabled');
    }
});

    #select_list {
         display: block !important;
    }

    #select_list {
         display: block !important;
         visibility: hidden;
    }