Question

我正在使用Material Design css，我想要禁用下一个按钮，直到使用jquery选择下拉列表值。

 <div class="mdl-selectfield mdl-js-selectfield">
    <select class="mdl-selectfield__select" id="ad_duration">
      <option value=""></option>
      <option value="option1">option 1</option>
      <option value="option2">option 2</option>
      <option value="option3">option 3</option>
      <option value="option4">option 4</option>
      <option value="option5">option 5</option>
    </select>
  </div>

<br><br><br>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"  id="submitorder">
  Next
</button>


$('#submitorder').attr('disabled', 'disabled');
$('#ad_duration').change(updateFormEnabled);

function updateFormEnabled() {
    if (verifyAdSettings()) {
        $('#submitorder').attr('disabled', '');
    } else {
        $('#submitorder').attr('disabled', 'disabled');
    }
}

function verifyAdSettings() {
    if ($('#ad_duration').val() != '') {
        return true;
    } else {
        return false
    }
}

没有mdl-selectfield就可以正常工作。 https://codepen.io/inouekun/pen/XeLyaY

Answer 1

而不是＆＃34; attr＆＃34;使用＆＃34; prop＆＃34;代替。因为 - （从其他答案中复制） - 为什么在使用attr（）/ removeAttr（）执行此操作时使用prop（）？基本上，在获取或设置属性时应使用prop（）（例如自动播放，检查，禁用和必需等）。

通过使用removeAttr（），你完全删除了disabled属性 - 而prop（）只是将属性的底层布尔值设置为false。

    $('#submitorder').prop('disabled', true);
    $('#ad_duration').change(updateFormEnabled);

    function updateFormEnabled() {
        console.log("update");
        if (verifyAdSettings()) {
            console.log("ok");
            $('#submitorder').prop('disabled', false);
        } else {
            console.log("not ok");
            $('#submitorder').prop('disabled', true);
        }
    }

    function verifyAdSettings() {
        console.log("verify");
        if ($('#ad_duration').val() != '') {
            return true;
        } else {
            return false;
        }
    }

选择下拉列表前禁用按钮 - Material Design

1 个答案: