0

当图片中显示的一个或多个选择器（动态生成）为空时，我试图禁用提交按钮。

http://i.stack.imgur.com/t4nng.png

我尝试了以下 jQuery 代码：

    <script>

    var $submit = $("input[name=store_values]");
    $(".ownlevelselect").each(function(){
    if($(".ownlevelselect:empty").length>0){
        $submit.attr("disabled","disabled");
    }else {
        $submit.removeAttr("disabled");
    }
    });

</script>

这些是我表格的相关部分：

   echo "<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";

和输入按钮：

   echo "<input type='submit' name='submit_values' value='Save'>";
  echo "<input type='submit' name='store_values' value='Store'></form>";

我要禁用的那个是name='store_values'

4

2 回答 2

1

您的问题有些含糊不清，您的意思是像 DOM 一样为空（选择不包含元素）还是像选择了空值的选择一样为空？

如果你的意思是像emtpy value这样的空，你可以试试这个，像 Shadow Wizard 所说的那样处理更改事件：

$('document').ready(function(){

    var submitButton = $('input[name="store_values"]');
    /* Called to disable button on page load, done here but probably possible server-side */
    checkValues()

    /* Called on change event on dropdowns */       
    $('select.ownlevelselect').on('change',function(){
        checkValues();
    });

    function checkValues(){
        /* Disable button if found an empty <select> (mean, no <option> inside), or a select with an empty value selected */
        submitButton.prop('disabled',$(".ownlevelselect > option:selected[value=''],.ownlevelselect:empty").length > 0);
    }
});

如果您的意思是像“Dom empty”这样的空（选择中没有定义选项），您可以试试这个（您可以将它放入一个函数中，并在每次动态添加元素时调用它）

$('document').ready(function(){
    var submitButton = $('input[name="store_values"]');
    submitButton.prop('disabled',$(".ownlevelselect:empty").length > 0);
});

编辑

请注意您的 ID，我没有任何相关的代码可以确定，但您似乎为您的选择重复使用相同的 ID，这是一个坏主意:)

编辑2

这是一个小提琴，所以你可以看看我是否错过了什么：http: //jsfiddle.net/d8rb9/

于 2013-04-18T09:31:33.270 回答
-1

您可以为每个选择使用 onBlur 事件来触发一个测试所有其他选择是否不为空的函数，如果是则激活提交按钮。

这是一个例子：

选择标签：

<select class="ownLevelSelect" onBlur="checkSelects()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Javascript函数：

<script>
    function checkSelects(){

        // integer to count the number of select with a correct value
        var nonEmpty = 0;

        // loop on all the select in the page with the class attribute : "ownLevelSelect"
        $('.ownLevelSelect').each(function(){
            if($(this).val()) {
                nonEmpty++;
            }
        });

        //desactivate the submit button if the number of selects in the page <> nonEmpty
        ($('.ownLevelSelect').length == nonEmpty)? $('#theSubmit').removeAttr("disabled") : $('#theSubmit').attr("disabled","disabled");
                }
</script>

也许您需要在页面加载时调用此函数，因此如果其中一个字段为空，则默认禁用该按钮

<script>
    $(document).ready(function() {
        checkSelects();
    });
</script>

注意：ID 属性在页面上必须是唯一的，因此在您的代码中更改此：

<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";

By this : 

<select class='ownlevelselect' id='ownlevelselect-".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";

我希望这会有所帮助。

于 2013-04-18T09:28:30.060 回答