Question

I am trying to develop a JQuery script to change the state of a checkbox by setting the disabled attribute to true depending on the state of a different checkbox.

我有三个che箱——暂停使用、选择1和选择2

采用以下代码,在点击中止的检查箱后,另外两个是残疾人。如果我不堵塞被停放的箱子,他们就会被利用(被拆除)。

我也希望用同样的逻辑上载荷。我的法典如下:

(function( $ ) {
     use strict ;

    $( document ).ready(function() {
        if( $( input[name="suspended"] ).is( :checked )){
            console.log( "Suspended is checked" );
            $( input[name="option1"]  ).attr("disabled", true);
            $( input[name="option2"]  ).attr("disabled", true);
        }
        else{
            console.log( "Suspended is unchecked" );
            $( input[name="option1"]  ).removeAttr("disabled");
            $( input[name="option2"]  ).removeAttr("disabled");

        }

        $(  input[name="suspended"]  ).change( function( e ){
            e.preventDefault;
            if ($(this).is( :checked )) {
                $( input[name="option1"]  ).attr("disabled", true);
                $( input[name="option2"]  ).attr("disabled", true);
            }else {
                $( input[name="option1"]  ).removeAttr("disabled");
                $( input[name="option2"]  ).removeAttr("disabled");
            }option2
            
        } );

    });

})( jQuery );

我显然已经解决了点击情况的变化,但无法说明为什么它也无意上下页。我能够获得一个假释。标语:在页数上显示国家,但hn箱状态。

Answer 1

我可以看到,你像JQuery一样,但即使在范illa贾里,也必然会很复杂。你们不做所有测试,就只能把<编码>可拆解的<>条码>财产的价值贴在检查箱内<条码>。

我喜欢使用<代码><fieldset>,而且在这种情况下,它可能具有意义,因为你有一份以上投入内容,希望加以消除。

document.addEventListener( DOMContentLoaded , e => {
  let form = document.forms.form01;
  form.options.disabled = form.suspended.checked;
});

document.forms.form01.suspended.addEventListener( change , e => {
  e.target.form.options.disabled = e.target.checked;
});

fieldset {
  border: none;
  display: flex;
  flex-direction: column;
}

<form name="form01">
  <label><input type="checkbox" name="suspended">Suspended</label>
  <fieldset name="options">
    <label>Option 1:<input type="text" name="option1"></label>
    <label>Option 2:<input type="text" name="option2"></label>
  </fieldset>
</form>

这里, j本:

$(document).ready(function() {
  $( [name="options"] ).prop( disabled , $( [name="suspended"] ).prop( checked ));
});

$( [name="suspended"] ).change(function(e) {
  $( [name="options"] ).prop( disabled , $(e.target).prop( checked ));
});

fieldset {
  border: none;
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form name="form01">
  <label><input type="checkbox" name="suspended">Suspended</label>
  <fieldset name="options">
    <label>Option 1:<input type="text" name="option1"></label>
    <label>Option 2:<input type="text" name="option2"></label>
  </fieldset>
</form>

Answer 2

@chrwahl已经在其答复中提供了一些非常好的方面。然而,你可以进一步缩短文字,同时适用于一系列领域:

$(function(){ // when DOM is loaded ...
   $(".suspended").change(function() {
  $(this).closest("fieldset").find("input").not(this).prop( disabled , $(this).prop( checked ));
}).change();
});

fieldset {
  border: none;
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form name="form01">
  <fieldset>
    <label><input type="checkbox" class="suspended" name="cb1">Suspended</label>
    <label>Option 1:<input type="text" name="option1"></label>
    <label>Option 2:<input type="text" name="option2"></label>
  </fieldset>
  <fieldset>
    <label><input type="checkbox" class="suspended" name="cb1" checked>Suspended</label>
    <label>Option 3:<input type="text" name="option3"></label>
    <label>Option 4:<input type="text" name="option4"></label>
  </fieldset>
</form>

当然,也可以以万伊拉·贾瓦文的形式这样做:

function upd8inps(cb){
 cb.closest("fieldset").querySelectorAll("input:not(.suspended)").forEach(el=>el.disabled=cb.checked)
}

document.addEventListener( DOMContentLoaded ,()=>{
 document.querySelector("form")
  .addEventListener("change",ev=>{
   if(ev.target.classList.contains("suspended")){
   upd8inps(ev.target);
  }});
 document.querySelectorAll("fieldset .suspended").forEach(upd8inps);
});

fieldset {
  border: none;
  display: flex;
  flex-direction: column;
}

<form name="form01">
  <fieldset>
    <label><input type="checkbox" class="suspended" name="cb1">Suspended</label>
    <label>Option 1:<input type="text" name="option1"></label>
    <label>Option 2:<input type="text" name="option2"></label>
  </fieldset>
  <fieldset>
    <label><input type="checkbox" class="suspended" name="cb1" checked>Suspended</label>
    <label>Option 3:<input type="text" name="option3"></label>
    <label>Option 4:<input type="text" name="option4"></label>
  </fieldset>
</form>

据认为,面包车的版本稍长。我选择在<代码>form要素上通过授权的活动。这样,即使有活力的附加领域也会对其<代码>的改动作出反应。

友情链接