禁用提交按鈕，直到填充ckeditor字段

Question

我有一個表格，我在textareas中使用CKEditor來格式化textarea的內容。子彈，字體顏色，大小等

我寫下面的JS代碼禁用提交按鈕，直到填寫所有一些特定的領域。由於CKEditor，JS代碼在文本字段上工作，但不在textarea字段中。

如果可能我還想讓這個JS代碼在使用CKEditor的textareas上工作。

JS代碼

<script type="text/javascript">  

$(function() { 

$(function() { 
    $('#sbtbtn').attr('disabled', 'disabled'); 
}); 


$('input[type=text],textarea,input[type=password]').keyup(function() { 

    if ($('#target1').val() !='' && 
    $('#editor1').val() != '') { 

     $('#sbtbtn').removeAttr('disabled'); 
    } else { 
     $('#sbtbtn').attr('disabled', 'disabled'); 
    } 
}); 
    }); 


    </script> 

HTML

<form action="insert.php" method="post" class="ara-form" name="theform" > 
       <header>Enter Job Details</header> 

       <fieldset>     
        <div class="row"> 
         <section class="col col-6"> 
          <label class="input"> 
          <i class="icon-append icon-company"></i> 
           <input type="text" id="target1" placeholder="Job Title" name="positiontitle"> 
           <div class="note note-error">This is a required field.</div> 
           <span class="error"></span> 
          </label> 
         </section> 
         <section class="col col-6"> 
          <label class="input"> 
           <i class="icon-append icon-company"></i> 
           <input type="text" id="target2" placeholder="Organization/Company Name" name="companyname"> 
           <div class="note note-error">This is a required field.</div> 
          </label> 
         </section> 
        </div> 

        <div class="row"> 
         <section class="col col-6"> 
          <label class="input"> 
           <i class="icon-append icon-company"></i> 
           <input type="text" id="target3" placeholder="Location" name="location" > 
           <div class="note note-error">This is a required field.</div> 
          </label> 
         </section> 
        </div>    
       </fieldset> 

       <fieldset> 

        <section> 
         <label class="textarea"> 

          Tell us about your company background 
          <textarea id="editor1" rows="10" cols="80" name="background" placeholder="Tell us about your company background"></textarea>CKEDITOR.replace('editor1'); 

var textarea = document.body.appendChild(document.createElement('textarea')); 
CKEDITOR.replace(textarea); 
         </label> 
        </section>     
        <section> 
         <label class="textarea"> 

          Job Summary 
          <textarea id="editor2" rows="10" cols="80" name="summary" placeholder="Job Summary"></textarea> 
         </label> 
        </section> 
       </fieldset> 
       <footer> 
        <p>Fill all fields to activate the submit button.</br> 
        Thanks</p><i class="fa fa-check" style="float: right; position: relative; right: 22px; color: white; z-index: 1; padding-top: 23px;"></i><input 
        class="button" type="submit" value="Submit" 

        id="sbtbtn" /> 

        <div style="float: right; padding-right: 10px;"><?php 
        include "../module/back.php"; 
        ?></div> 
        </footer> 
      </form> 

CKEditor的通話

<script> 
       // Replace the <textarea id="editor1"> with a CKEditor 
       // instance, using default configuration. 
       CKEDITOR.replace('editor1'); 
      </script> 

Answer 1

試試這個：

CKEDITOR.replace('editor1', { 
    on: { 
     change: function() { 
      var inst = CKEDITOR.instances['editor1']; 
      if (inst.getData() != '') { 
       $('#sbtbtn').removeAttr('disabled'); 
      } else { 
       $('#sbtbtn').attr('disabled', 'disabled'); 
      } 
     } 
    } 
}); 

界上initalizing變化事件，並通過CKEDITOR.instances['editor1'].getData()

獲取數據請參閱文檔： http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-on