用jquery輸入和選擇問題

-7

美好的一天，我有一個問題，我一直在努力尋找出路，整天都沒有運氣。用jquery輸入和選擇問題

下面的快照是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>

來源

2016-11-10 Samuel Mark

問題是什麼？請提供最少量的代碼來重現您的問題。 – APAD1

並告訴我們select是如何實現的。它怎麼可能是空的？ – jonzee

剛剛更新了我的問題。 –

你應該把按鈕的屬性disabled在原來的HTML，所以它開始時禁用。然後，你可以在選擇或輸入與改變運行功能：

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

來源

2016-11-10 20:42:54 Barmar

哦，我的，這只是保存我的一天，謝謝你，我非常感謝。 @Barmar –

首先，你需要保持這種功能上的選擇框的變化像這種

$('#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語句中寫的那樣。

來源

2016-11-10 21:04:03

它在那裏，只是沒有分享這方面，感謝修復 –

好吧，這裏是工作代碼，你必須在輸入內寫入內容，然後按鈕獲取啓用。

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>

來源

2016-11-10 21:07:54 jonzee

用jquery輸入和選擇問題

回答

相關問題