使用 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">
  		<option value="" class="hidden">Experience Level</option>
  		<?php if($skillevels):
  				foreach($skillevels AS $level):?>
  		        <option value="<?=$level->level_id?>"><?=$level->level_name?></option>
  				<?php endforeach;
  				endif;?>
  	    </select>
	  </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

好的，这里是工作代码，你必须在输入中写一些东西，然后按钮启用。

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">
  		<option value="" class="hidden">Experience Level</option>
  		<?php if($skillevels):
  				foreach($skillevels AS $level):?>
  		        <option value="<?=$level->level_id?>"><?=$level->level_name?></option>
  				<?php endforeach;
  				endif;?>
  	    </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>

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);

    };
  });

其次，没有你在 if 函数语句中写的 $('form.js-form-skills') 这样的元素。

Answer 3

您应该将disabled 放在原始 HTML 中的按钮属性中，因此它一开始是禁用的。然后您可以在选择或输入更改时运行您的函数：

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