如何禁用输入字段，但不禁用单击的输入字段，然后启用全部

时间：2016-07-11 09:43:17

标签： javascript jquery html css button

我的项目中有一些按钮，如果单击一个按钮而不是单击按钮，我想禁用所有按钮。当我再次单击按钮时，我想启用所有这些按钮。 这是我尝试过但没有用的东西： 

$('#TOSTORAGE').click(function(){
  $('#TOULD').prop('disabled', true\false);
  $('#TOTRAIN').prop('disabled', true\false);
  $('#TOARRIVAL').prop('disabled', true\false);
  $('#TOHANDLER').prop('disabled', true\false);
});
$('#TOULD').click(function(){
  $('#TOSTORAGE').prop('disabled', true\false);
  $('#TOTRAIN').prop('disabled', true\false);
  $('#TOARRIVAL').prop('disabled', true\false);
  $('#TOHANDLER').prop('disabled', true\false);
});
$('#TOTRAIN').click(function(){
  $('#TOSTORAGE').prop('disabled', true\false);
  $('#TOULD').prop('disabled', true\false);
  $('#TOARRIVAL').prop('disabled', true\false);
  $('#TOHANDLER').prop('disabled', true\false);
});
$('#TOARRIVAL').click(function(){
  $('#TOSTORAGE').prop('disabled', true\false);
  $('#TOULD').prop('disabled', true\false);
  $('#TOTRAIN').prop('disabled', true\false);
  $('#TOHANDLER').prop('disabled', true\false);
});
$('#TOHANDLER').click(function(){
  $('#TOSTORAGE').prop('disabled', true\false);
  $('#TOULD').prop('disabled', true\false);
  $('#TOTRAIN').prop('disabled', true\false);
  $('#TOARRIVAL').prop('disabled', true\false);
});
.btn-hl2{
color:#ffffff;
height:90px;
width: 340px;
    display: inline-block;
    margin: 6px;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-color: #536e7f;
    border: 1px solid #ffffff;
    white-space: nowrap;
    padding: 4px 10px;
    font-size: 34px;
    font-family: inherit;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    font:#FFF;    
}

.btn-hl3{
color:#ffffff;
height:90px;
width: 695px;
    display: inline-block;
    margin: 6px;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-color: #536e7f;
    border: 1px solid #ffffff;
    white-space: nowrap;
    padding: 4px 10px;
    font-size: 34px;
    font-family: inherit;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    font:#FFF;    
}

.btn-hl2:hover {
        background-color: #e4b527;
    }
.btn-hl3:hover {
        background-color: #e4b527;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="TOSTORAGE" type="submit" class="btn-hl2" name="TOSTORAGE">
  <span aria-hidden="true"></span> TO STORAGE
</button>  
<button id="TOULD" type="submit" class="btn-hl2" name="TOULD">
  <span aria-hidden="true"></span> TO ULD
</button>
<button id="TOTRAIN" type="submit" class="btn-hl2" name="TOTRAIN">
  <span aria-hidden="true"></span> TO TRAIN
</button>
<button id="TOARRIVAL" type="submit" class="btn-hl2" name="TOARRIVAL">
  <span aria-hidden="true"></span> TO ARRIVAL
</button>
<button id="TOHANDLER" type="submit" class="btn-hl3" name="TOHANDLER">
  <span aria-hidden="true"></span> TO HANDLER
</button>

3 个答案:

答案 0 :(得分：2)

试试这个：

＆＃13;
＆＃13; 
Main.java
＆＃13; 
$('button').click(function() {
  $('button').not(this).prop('disabled', function(i, state) {
    return !state;
  });
});
＆＃13; 
button:disabled{
  color:red;
}
＆＃13;
＆＃13;
＆＃13;

（edit1更好的选择器 .not（）而不是 .siblings（））

（edit2简化解决方案）

答案 1 :(得分：1)

您可以设置公共班级名称并通过以下方式实现：

＆＃13;
＆＃13; 
$('.btn-common').click(function(){
	$('.btn-common').prop('disabled', true);
	$(this).prop('disabled', false);
});
＆＃13; 
.btn-hl2{
    color:#ffffff;
    height:90px;
    width: 340px;
    display: inline-block;
    margin: 6px;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-color: #536e7f;
    border: 1px solid #ffffff;
    white-space: nowrap;
    padding: 4px 10px;
    font-size: 34px;
    font-family: inherit;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    font:#FFF;    
}

.btn-hl3{
    color:#ffffff;
    height:90px;
    width: 695px;
    display: inline-block;
    margin: 6px;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-color: #536e7f;
    border: 1px solid #ffffff;
    white-space: nowrap;
    padding: 4px 10px;
    font-size: 34px;
    font-family: inherit;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    font:#FFF;    
}
.btn-common:disabled {
    background: #dddddd;
}
.btn-hl2:hover {
    background-color: #e4b527;
}
.btn-hl3:hover {
    background-color: #e4b527;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="TOSTORAGE" type="submit" class="btn-hl2 btn-common" name="TOSTORAGE">
  <span aria-hidden="true"></span> TO STORAGE
</button>  
<button id="TOULD" type="submit" class="btn-hl2 btn-common" name="TOULD">
  <span aria-hidden="true"></span> TO ULD
</button>
<button id="TOTRAIN" type="submit" class="btn-hl2 btn-common" name="TOTRAIN">
  <span aria-hidden="true"></span> TO TRAIN
</button>
<button id="TOARRIVAL" type="submit" class="btn-hl2 btn-common" name="TOARRIVAL">
  <span aria-hidden="true"></span> TO ARRIVAL
</button>
<button id="TOHANDLER" type="submit" class="btn-hl3 btn-common" name="TOHANDLER">
  <span aria-hidden="true"></span> TO HANDLER
</button>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

Check this demo using jquery

<强> HTML 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="TOSTORAGE" type="submit" class="btn-hl2" name="TOSTORAGE">
  <span aria-hidden="true"></span> TO STORAGE
</button>  
<button id="TOULD" type="submit" class="btn-hl2" name="TOULD">
  <span aria-hidden="true"></span> TO ULD
</button>
<button id="TOTRAIN" type="submit" class="btn-hl2" name="TOTRAIN">
  <span aria-hidden="true"></span> TO TRAIN
</button>
<button id="TOARRIVAL" type="submit" class="btn-hl2" name="TOARRIVAL">
  <span aria-hidden="true"></span> TO ARRIVAL
</button>
<button id="TOHANDLER" type="submit" class="btn-hl3" name="TOHANDLER">
  <span aria-hidden="true"></span> TO HANDLER
</button>

<强> JS 

(function($) {
    $.fn.enableDisable = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

$('button').click(function(e) {
  $('button').not(this).enableDisable();
});

Fiddle Demo

相关问题
最新问题