Question

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

我尝试了以下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'

的人

Answer 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”（在select中没有定义选项），你可以尝试这个（你可以把它放到一个函数中并在每次动态添加一个元素时调用它）

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

编辑

小心你的ID，我没有任何相关的代码部分可以肯定，但你似乎重复使用相同的ID，这是一个坏主意：）

<强> EDIT2

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

Answer 2

你可以使用事件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 attribut在页面上必须是唯一的，因此在您的代码中更改：

<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']."' >";

我希望这会有所帮助。

当其中一个字段为空时，禁用提交按钮

2 个答案: