jqueryの入力と選択問題

Question

良い日、私には問題があり、私は一日中、道のりを見つけようとしています。

スナップショットはformです。選択フィールドが変更され、空ではなく入力フィールドも空でない場合にボタンを有効にしたい場合。

以下は私が試したことです。 現在入力ボックスに戻るとボタンが有効になります。それが無効になって起動するよう

skillButton = function() { 
 
    var skill = $.trim($("#skillauto").val()); 
 
    //$('select[name=selector]').val() 
 
    var level = $("#level :selected").val() 
 
    //if((skill !== '') && (level !== '')) && (level !== '') 
 
    if ((skill !== '') && (level !== '')) { 
 
    //alert(level); 
 
    $('form.js-form-skills') 
 
     .find('button#putskill') 
 
     .prop('disabled', false); 
 
    } else { 
 

 
    $('button#putskill').prop("disabled", true); 
 

 
    }; 
 
}

<div class="hidden" id="skills"> 
 
    <div class="form-row form-wrapper cf"> 
 

 
    <div class="control is-horizontal"> 
 
     <div class="control is-grouped"> 
 
     <p class="control is-expanded"> 
 
      <!-- <span class="js-awesomplete"> --> 
 
      <input maxlength="20" id="skillauto" name="skill" placeholder="Add Skill" class="capitalize input is-fullwidth" value="" type="text"> 
 
      <!-- </span> --> 
 
     </p> 
 
     <p class="control is-expanded"> 
 
      <span class="select is-fullwidth"> 
 
      <select id="level" name="level"> 
 
    \t \t <option value="" class="hidden">Experience Level</option> 
 
    \t \t <?php if($skillevels): 
 
    \t \t \t \t foreach($skillevels AS $level):?> 
 
    \t \t   <option value="<?=$level->level_id?>"><?=$level->level_name?></option> 
 
    \t \t \t \t <?php endforeach; 
 
    \t \t \t \t endif;?> 
 
    \t  </select> 
 
\t </span> 
 
     </p> 
 

 
     </div> 
 
    </div> 
 
    <p class="control"> 
 
     <input type="hidden" name="skproceed" value="yea"> 
 
     <button class="button is-primary" id="putskill"><span>Submit</span> 
 
     </button> 
 

 
    </p> 
 
    </div> 
 
</div>

Answer 1

あなたは、元のHTMLでボタンの属性で disabledを置く必要があります。

$("#level").change(skillButton); 
$("#skillauto").on("input", skillButton); 

Answer 2

まずあなたは何の要素としては存在しない。この

$('#level').change(function() { 
    var skill = $("#skillauto").val(), 
     level = $("#level:selected").val() 
     //if((skill !== '') && (level !== '')) && (level !== '') 
    if ((skill !== '') && (level !== '')) { 
     //alert(level); 
     $('button#putskill').prop("disabled", false); 
    } else { 

     $('button#putskill').prop("disabled", true); 

    }; 
    }); 

第二のように選択ボックス の変化にこの機能を維持する必要がありますを選択または入力がで変更されたとき、あなたはあなたの関数を実行することができます$（ 'form.js-form-skills'）はif文に書かれています。

Answer 3

ここでは動作コードがありますので、入力の中に何かを書いてからボタンを有効にしてください。

function onChange() { 
 
    console.log('input change') 
 
    var skill = $.trim($("#skillauto").val()); 
 
    //$('select[name=selector]').val() 
 
    var level = $("#level :selected").val() 
 
    //if((skill !== '') && (level !== '')) && (level !== '') 
 
    if ((skill !== '') && (level !== '')) { 
 
    //alert(level); 
 
     $('button#putskill') 
 
     .prop('disabled', false); 
 
    } else { 
 

 
    $('button#putskill').prop("disabled", true); 
 
    }; 
 
} 
 

 
$('#skillauto').change(onChange); 
 
$('#level').change(onChange);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hidden" id="skills"> 
 
    <div class="form-row form-wrapper cf"> 
 

 
    <div class="control is-horizontal"> 
 
     <div class="control is-grouped"> 
 
     <p class="control is-expanded"> 
 
      <!-- <span class="js-awesomplete"> --> 
 
      <input maxlength="20" id="skillauto" name="skill" placeholder="Add Skill" class="capitalize input is-fullwidth" value="" type="text"> 
 
      <!-- </span> --> 
 
     </p> 
 
     <p class="control is-expanded"> 
 
      <span class="select is-fullwidth"> 
 
      <select id="level" name="level"> 
 
    \t \t <option value="" class="hidden">Experience Level</option> 
 
    \t \t <?php if($skillevels): 
 
    \t \t \t \t foreach($skillevels AS $level):?> 
 
    \t \t   <option value="<?=$level->level_id?>"><?=$level->level_name?></option> 
 
    \t \t \t \t <?php endforeach; 
 
    \t \t \t \t endif;?> 
 
    \t  </select> 
 
    </span> 
 
     </p> 
 

 
     </div> 
 
    </div> 
 
    <p class="control"> 
 
     <input type="hidden" name="skproceed" value="yea"> 
 
     <button disabled class="button is-primary" id="putskill"><span>Submit</span> 
 
     </button> 
 

 
    </p> 
 
    </div> 
 
</div>