Question

我现在的问题是如何在填写选择下拉列表和输入字段之前禁用提交按钮。我的禁用工作正常但即使我已经在下拉列表和输入字段中选择了它也无法启用。这是我的代码。希望你能帮助我。

echo "<form action='portal-files/user-file-upload.php' method='post' enctype='multipart/form-data'>";
echo "<input type='hidden' name='MAX_FILE_SIZE' value='100000' />";
echo "<input type='hidden' name='admin_id' value='$user->id' />";
echo "<select name='id' id='form-option' class='test-only'>";
echo '<option selected="selected">' .'Choose a User'. '</option>';

foreach ($registeredUsers as $key => $value) {
  $registered = JFactory::getUser($value);
  echo '<option value="'.$registered->id.'">'.$registered->name.'</option>';

}
echo "</select>";
echo "<input name='uploadedfile' type='file' id='custom-file-input' class='test-only'/> <br/>";
echo '<input type="submit" name="submit" value="Upload" id="custom-submit-input" disabled="disabled">';
echo "</form>";


<script> 

    jQuery(document).ready(function() { 
         jQuery('.test-only').on('keyup change', function(){
            if (jQuery('#form-option').val() == '') {
                    jQuery('#custom-submit-input').prop('disabled', true);
            } else {
                    jQuery('#custom-submit-input').prop('disabled', false);
            }
        });

        }); 
    }); 

</script>

Answer 1

在您的第一个选项标记

中尝试此操作

echo '<option selected="selected" value="">' .'Choose a User'. '</option>';

Answer 2

在此处更改您的条件代码。

if (jQuery('#form-option').val() == '') {

要

if (jQuery(this).val() == '') {

jQuery(this)意味着

将由此返回的DOM元素转换为jQuery对象，从中可以继续使用jQuery。 LINK

Answer 3

你必须保留一个标志来检查是否填写了检查值？

jQuery('.test-only').on('keyup change', function() {
 var flag = false;
  $('.test-only').each(function() {
       if($(this).val()=="") {
         flag = true;
         return false;
       }
  });

 jQuery('#custom-submit-input').prop('disabled', flag);

});

<强> Demo

Answer 4

html标记存在一些问题。

我将此示例设置为JSFIDDLE。将value = ''设置为默认值后，请检查此内容。

如果您对此有任何疑问或疑虑，请与我们联系。

谢谢！

如何禁用提交按钮，直到输入并选择填写下拉列表

4 个答案: