如果选择第一个选项,如何禁用第二个选项

时间:2015-04-08 08:43:07

标签: javascript jquery html select

我在五行中有10个下拉列表选择字段!如果有人从第一个或第二个选择中选择了某个内容,那么我想禁用 同一行中的另一个(不要只消失禁用)!

当我选择启用值时,应启用禁用选择!

对不起我的英文,我希望你理解我的问题! 提前谢谢!!



<table>
   <tr>
      <th>
        First select
      </th>
      <th>
        Second select
      </th>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>    
</table>
&#13;
&#13;
&#13;

Click Fiddle.

4 个答案:

答案 0 :(得分:6)

您可以使用此代码段:

$('select').change(function(){
    $(this).closest('tr').find('select').not(this).prop('disabled', this.value !== "enable")
});

Fiddle

答案 1 :(得分:1)

这会有所帮助:

$("select").on("change", function(){
   $(this).closest("td").siblings("td").find("select").attr("disabled",true);
   if($(this).val()=="enable") {          
      $(this).closest("td").siblings("td").find("select").attr("disabled",false);
   }
});

Fiddle

答案 2 :(得分:0)

$('select').change(function() {
    if($(this).val()!='enable') {
        $(this).parent().siblings().children('select').prop('disabled',true);
    }
    else {
        $(this).parent().siblings().children('select').prop('disabled',false);
    }

});

https://jsfiddle.net/51fevoam/8/

答案 3 :(得分:0)

我认为这就是答案,你在寻找什么。我想你可以 简化更多。但无论如何你都有了这个主意。

HTML - 
<table id='myTable'>
   <tr>
      <th>
        First select
      </th>
      <th>
        Second select
      </th>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
      <td>
         <select>
            <option value="enable">Enable</option>
            <option value="test2">Test 2</option>
            <option value="test3">Test 3</option>
            <option value="test4">Test 4</option>
         </select>
      </td>
   </tr>    
</table>

Javascript -     
    var items = $('#myTable select').on('change', function() {
            var index = items.index(this);
            var selectArray = $('select');
            if(index === 0 || index === 2 || index === 4 || index === 6 || index === 8) {
                console.log(index);
                $(selectArray[index + 1]).attr('disabled', true);
            } else if (index === 1 || index === 3 || index === 5 || index === 7 || index === 9) {
                console.log(index);
                $(selectArray[index - 1]).attr('disabled', true);
            }
        });

JSFiddle Link - https://jsfiddle.net/nzlorca/51fevoam/