如果父hasClass,则敲除js禁用按钮

时间:2017-06-16 18:53:04

标签: javascript knockout.js

是否可以禁用子div if $("#parent").hasClass("bar"); 内的按钮,而在实际按钮上放置data-bind...属性?以下是我的代码。我觉得这是可能的,但我不确定我是否接近它:

HTML:

<div id="parent" class="">
  <div class='active'>
    <button>Button 1</button> 
  </div>
<div>

JS

function foo(){
  var self = this;   
  self.parent = ko.pureComputed(function(){
    return $('#parent').hasClass('bar');       
  });
  if(self.parent){
    $('.active button').attr("disabled",true);
  }  
};
ko.applyBindings(foo);

这种方法的原因是会有很多很多子div,但只有一个有活动类,如果我不需要,我担心绑定所有这些div。非常感谢,

2 个答案:

答案 0 :(得分:1)

如何使用订阅并窃取monkey_dev1300 jquery。

在下面运行代码段。并将类从foo更改为bar。

&#13;
&#13;
function viewModel(){
var self = this;
this.parentCss = ko.observable('foo');

}
var vm = new viewModel()
ko.applyBindings(vm);

vm.parentCss.subscribe(function(newValue) {
    if(newValue === 'bar')
    { $('.active button').attr("disabled",true); }
    else
    {{ $('.active button').attr("disabled",false); }}
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
change class:  <input data-bind="value: parentCss"/>
</p>


<div id="parent" data-bind="css: parentCss"
  <div class='active'>
    <button >Button 1</button> 
  </div>
    <div class='active'>
    <button >Button 2</button> 
  </div>
   <div class='active'>
    <button >Button 3</button> 
  </div>
<div>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

如果你想“禁用”一个按钮,你可以使用它与JQuery和css:

$('button').css("pointer-events", "none");

这将停止按钮触发点击事件。

同样,您可以使用

“启用”它
$('button').css("pointer-events", "auto");