使用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

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

$("#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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;