取決於使用jQuery的選擇選項禁用按鈕？

Question

在選擇選項1時，必須禁用按鈕，並在剩餘選項被選中時啓用該按鈕。

$(document).ready(function(){ 
 
    if($("option[value='1']")){ 
 
    $("button").prop('disabled',true); 
 
    } 
 
    else{ 
 
    $("button").prop('disabled',false); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

Answer 1

在您的代碼$("option[value='1']")將返回一個jQuery對象，它是truthy總是這樣，如果聲明沒有任何意義。儘管您的代碼只在頁面加載時運行一次。

您需要綁定一個change事件處理程序以根據當前值更新按鈕。

$(document).ready(function() { 
 
    // bind change event handler 
 
    $('#opt').change(function() { 
 
    // update disabled property 
 
    $("button").prop('disabled', this.value == 1); 
 
    // trigger change event to set initial value 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

Answer 2

$(document).ready(function() { 
 
    $('#opt').change(function() { 
 
    $("button").prop('disabled', $(this).val() == 1);//will disable if current value is equals to 1 
 

 
    }).change() 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

在選擇則取決於值設置按鈕

Answer 3

的禁用試試這個變化事件校驗值。當你想顯示的東西時刪除屬性disabled。閱讀reference並參閱以下示例。

$(document).ready(function(){ 
 
    $("button").prop('disabled',true); 
 
    $('#opt').change(function(){ 
 
    if($(this).val()==1){ 
 
     $("button").attr('disabled','disabled'); 
 
     } 
 
    else{ 
 
     $("button").removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

Answer 4

你可以嘗試這樣的

$(document).ready(function() { 
 
     $("#opt").change(function() { 
 
      if ($(this).val() == "1") { 
 
       $("button").prop('disabled', true); 
 
      } 
 
      else { 
 
       $("button").prop('disabled', false); 
 
      } 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button disabled >button</button>