jQueryでチェックボックスを無効にする

条件が満たされている場合、選択したアイテムのチェックボックスを無効にしようとしています。ユーザが1つ以上の火曜日の朝クラスまたは1つ以上の火曜日の午後のクラスを選択すると、警告が発せられる。アラートは正常に機能していますが、チェックボックスを無効にするわけではなく、ユーザーは好きなだけ多くのボックスを選択し続けることができます。jQueryでチェックボックスを無効にする

私は

$(this).prop("disabled", true);

のようなものを使用してチェックボックスを無効にすることができましたが、それは私がチェックしてる特定のクラスのための1つの選択されたいずれかのチェックボックスを無効にしていませんでした。私は今クラスを探すために変更しましたが、無効にするわけではありません。ここからどこに行くのかちょっと困りました。

//Activities 
 
var $activities = $('.activities input[type="checkbox"]'); 
 

 
var tuesMorn = 0; 
 
var tuesAft = 0; 
 
var wedMorn = 0 
 
var wedAft = 0; 
 
var main = 0; 
 
var total = 0; 
 

 
//On change of activity select boxes, looks for duplicate times and creates total $ amount 
 
$activities.change(function() { 
 
    var activityClass = $(this).closest('input').attr("class"); 
 
    var isChecked = this.checked; 
 
    $activities.not(this).prop('disabled', false); 
 

 
    if (activityClass === 'tues_morn') { 
 
    tuesMorn = isChecked ? tuesMorn + 1 : tuesMorn - 1; 
 
    total = isChecked ? total + 100: total -100; 
 
    } else if (activityClass === 'tues_aft') { 
 
    \t tuesAft = isChecked ? tuesAft + 1 : tuesAft - 1; 
 
    \t total = isChecked ? total + 100: total -100; 
 
    } else if (activityClass === 'wed_morn'){ 
 
     wedMorn = isChecked ? wedMorn + 1 : wedMorn - 1; 
 
    \t total = isChecked ? total + 100: total -100; 
 
    } else if (activityClass === 'wed_aft'){ 
 
     wedAft = isChecked ? wedAft + 1 : wedAft - 1; 
 
    \t total = isChecked ? total + 100: total -100; 
 
    } else if (activityClass === 'main'){ 
 
     main = isChecked ? main + 1 : main - 1; 
 
    \t total = isChecked ? total + 200: total -200; 
 
} 
 
if (tuesMorn > 1) { 
 
     alert("You Signed Up For Too Many Morning Classes"); 
 
     $(".tues_morn", this).prop('disabled', true); 
 
    } 
 
if (tuesAft > 1) { 
 
     alert("You Signed Up For Too Many Afternoon Classes"); 
 
     $(".tues_aft", this).prop('disabled', true); 
 
     } 
 
    document.getElementById('Totalcost').innerHTML = "$" + total; 
 
});

.error, .error_name, .error_email, .error_activities, .error_cc, 
 
.error_cvv, .error_zip { 
 
\t display: none; 
 
\t color: red; 
 
\t margin-bottom: 5px; 
 
\t position: relative; 
 
} 
 

 

 
.error_show{ 
 
\t color: red; 
 
\t margin-left: 10px; 
 
}

<body> 
 
\t <div class="container"> 
 
    
 
    <header> 
 
     <span>Register for</span> 
 
     <h1>Full Stack Conf</h1> 
 
    </header> 
 

 
    <form id='contact' action="index.html" method="post"> 
 
       
 
     <fieldset>   
 
     <legend>Basic Info</legend> 
 
     
 
     <label for="name">Name:</label> 
 
     <input type="text" id="name" name="user_name"> 
 
     <span class="error_name">A name is required</span> 
 
     
 
     <label for="mail">Email:</label> 
 
     <input type="email" id="mail" name="user_email"> 
 
      <span class="error_email">A valid email address is required</span> 
 
     
 
     <label for="title">Job Role</label> 
 
     <select id="title" name="user_title"> 
 
      <option value="full-stack js developer">Full Stack JavaScript Developer</option> 
 
      <option value="front-end developer">Front End Developer</option> 
 
      <option value="back-end developer">Back End Developer</option> 
 
      <option value="designer">Designer</option>   
 
      <option value="student">Student</option> 
 
      <option value="other">Other</option> 
 
     </select>   
 
     </fieldset> 
 

 
     <div><input placeholder='Your Job Role' id='other-title'></input></div> 
 
     
 
     <fieldset class="shirt"> 
 
     <legend>T-Shirt Info</legend> 
 
     
 
     <div> 
 
      <label for="size">Size:</label> 
 
      <select id="size" name="user_size"> 
 
      <option value="small">S</option> 
 
      <option value="medium" selected>M</option> 
 
      <option value="large">L</option> 
 
      <option value="extra large">XL</option> 
 
      </select> 
 
     </div> 
 

 
     <div> 
 
      <label for="design">Design:</label> 
 
      <select id="design" name="user_design"> 
 
      <option>Select Theme</option> 
 
      <option value="js puns">Theme - JS Puns</option> 
 
      <option value="heart js">Theme - I &#9829; JS</option> 
 
      </select> 
 
     </div> 
 

 
     <div id="colors-js-puns" class=""> 
 
      <label for="color">Color:</label> 
 
      <select id="color"> 
 
      <option>Select Color</option> 
 
      <option value="cornflowerblue" class="js_puns">Cornflower Blue (JS Puns shirt only)</option> 
 
      <option value="darkslategrey" class="js_puns">Dark Slate Grey (JS Puns shirt only)</option> 
 
      <option value="gold" class="js_puns">Gold (JS Puns shirt only)</option> 
 
      <option value="tomato" class="js">Tomato (I &#9829; JS shirt only)</option> 
 
      <option value="steelblue" class="js">Steel Blue (I &#9829; JS shirt only)</option> 
 
      <option value="dimgrey" class="js">Dim Grey (I &#9829; JS shirt only)</option> 
 
      </select> 
 
     </div>     
 
     </fieldset> 
 

 
     <fieldset class="activities"> 
 
     <legend>Register for Activities</legend> 
 
     <label><input type="checkbox" name="all" class="main">Main Conference — $200</label> 
 
     <label><input type="checkbox" name="js-frameworks" class="tues_morn"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label> 
 
     <label><input type="checkbox" name="js-libs" class="tues_aft"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label> 
 
     <label><input type="checkbox" name="express" class="tues_morn"> Express Workshop — Tuesday 9am-12pm, $100</label> 
 
     <label><input type="checkbox" name="node" class="tues_aft"> Node.js Workshop — Tuesday 1pm-4pm, $100</label>   
 
     <label><input type="checkbox" name="build-tools" class="wed_morn"> Build tools Workshop — Wednesday 9am-12pm, $100</label> 
 
     <label><input type="checkbox" name="npm" class="wed_aft"> npm Workshop — Wednesday 1pm-4pm, $100</label> 
 
        \t 
 
     </fieldset> 
 

 
     <span class="error_activities">One Activity Must Be Selected!</span> 
 
     Total Amount : <span id="Totalcost"> </span> 
 
     <fieldset> 
 
     <legend>Payment Info</legend> 
 

 
     <label for="payment">I'm going to pay with:</label> 
 
     <select id="payment" name="user_payment"> 
 
      <option value="select_method">Select Payment Method</option> 
 
      <option value="credit card">Credit Card</option> 
 
      <option value="paypal">PayPal</option> 
 
      <option value="bitcoin">Bitcoin</option> 
 
     </select> 
 

 
     <div id="credit-card" class="credit-card"> 
 

 
      <div class="col-6 col"> 
 
      <label for="cc-num">Card Number:</label> 
 
     \t <input id="cc-num" name="user_cc-num" type="text"> 
 
      </div> 
 
      <div class="col-3 col"> 
 
      <label for="zip">Zip Code:</label> 
 
      <input id="zip" name="user_zip" type="text"> 
 
      </div> 
 
      <div class="col-3 col"> 
 
      <label for="cvv">CVV:</label> 
 
      <input id="cvv" name="user_cvv" type="text"> 
 
      </div> 
 
      <span class="error_cc">Sorry card number has wrong # of digits or incorrect entry.</span> 
 
      <span class="error_zip">Sorry that's not a valid zip code.</span> 
 
      <span class="error_cvv">Sorry you've entered an invalid CVV.</span> 
 
      <label for="exp-month">Expiration Date:</label> 
 
      <select id="exp-month" name="user_exp-month"> 
 
      <option value="1">1 - January</option> 
 
      <option value="2">2 - February</option> 
 
      <option value="3">3 - March</option> 
 
      <option value="4">4 - April</option> 
 
      <option value="5">5 - May</option> 
 
      <option value="6">6 - June</option> 
 
      <option value="7">7 - July</option> 
 
      <option value="8">8 - August</option> 
 
      <option value="9">9 - September</option> 
 
      <option value="10">10 - October</option> 
 
      <option value="11">11 - November</option> \t 
 
      <option value="12">12 - December</option>   \t \t   
 
      </select> 
 
      <label for="exp-year">Expiration Year:</label> 
 
      <select id="exp-year" name="user_exp-year"> 
 
      <option value="2016">2016</option> 
 
      <option value="2017">2017</option> 
 
      <option value="2018">2018</option> 
 
      <option value="2019">2019</option> 
 
      <option value="2020">2020</option>   \t \t   
 
      </select> \t     \t   
 
     </div> 
 

 
     <div id="paypal"> 
 
     \t <p>If you selected the PayPal option we'll take you to Paypal's site to set up your billing information, when you click “Register” below.</p> 
 
     </div> 
 

 
     <div id="bitcoin"> 
 
     \t <p>If you selected the Bitcoin option we'll take you to the Coinbase site to set up your billing information. Due to the nature of exchanging Bitcoin, all Bitcoin transactions will be final.</p> 
 
     </div>     
 

 
     </fieldset>   
 
     <!-- Submit Button --> 
 
\t <div id="contact_submit"> 
 
     <button type="submit">Register</button> 
 
    </div> 
 
    </form> 
 

 
\t </div> 
 
    <script 
 
    src="https://code.jquery.com/jquery-1.12.4.js" 
 
    integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 
 
    crossorigin="anonymous"></script> 
 
    <script src="js/main.js"></script>

出典

2017-09-20 John Rogerson

$（ "。tues_morn"）。attr（ "無効"、true） –

メモしないでください。 @ブライアンデルリンガー---まだ選択肢を無効にしていない –

ジョン、セレクターを修正した後でさえ、あなたは基本的な論理的な問題があると思う。すでに選択されている '.tues_aft'チェックボックスをすべて無効にすると、ユーザはどのように選択を解除しますか？再アクティブチェックの代わりに事前チェックを行う必要があります。すべての** ** ** .tues_aft'チェックボックス**を無効にしてください** **はユーザーが**後でない最大許容**を選択したためです。 – Nope

論理がうまく機能しないため、コードを少し変更しました。活動が有効または無効にするか、同じグループからのものかどうかをチェックする必要があり、

$activities.not(this).prop('disabled', false);

を次に：

最初に、あなたは、すべて単一の変更上のすべての活動を再度有効にはならないので、この行は表示されなくなり以下の場合は、それらので、私はあなたを変更：

if ($this.is('.tues_morn'))

最後に、有効または無効の状態では、単一の選択があるかどうかに依存しますので、私はこれを書いた：

$(".tues_morn").not(this).prop('disabled', tuesMorn > 0);

を

あなたがここでそれをチェックアウトすることができます：https://jsfiddle.net/dobu5qpt/5/のjqueryの精神で

出典

2017-09-20 15:10:00 Piyin

それはまさに私が必要なものです。 –

本当にありがとうございます – Piyin

あなたは$の二番目の引数としてthis必要はありません。ただ、それが働いた行を編集した後

if (tuesMorn > 1) { 
    alert("You Signed Up For Too Many Morning Classes"); 
    $(".tues_morn").prop('disabled', true); 
} 
if (tuesAft > 1) { 
    alert("You Signed Up For Too Many Afternoon Classes"); 
    $(".tues_aft").prop('disabled', true); 
}

出典

2017-09-20 14:54:04

2つの午前と午後のクラスのオプションがあります。これを行うと、ボックスをチェックする機能を持たない両方の選択が無効になります。 –

@JohnRogerson元のコードには、> 1がハードコードされています。動的な数値セットの解が必要な場合は、別の質問としてそれを求めてください。上の質問で述べた問題はこの答えで解決され、そのように受け入れられるべきです。 – Nope

@JohnRogersonそれはあなたのアプリのロジックとは別の問題です。制限に達すると特定のカテゴリのチェックされていないすべてのボックスを無効にし、そのプロセスのユーザーに侵入警告を点滅させないようにする必要があります。私はあなたが提出した質問に答えました。これはjQueryを使ってチェックボックスを無効にする方法です。 –

-2

を。 $(".tues_aft", this).prop('disabled', true);はなぜ書きましたか？

$(this).prop('disabled', true);は、イベントコールバックで十分です。

https://jsfiddle.net/dobu5qpt/2/

EDIT：あなたは、すべての.tues_aftが無効にする代わりにを使用したい場合にのみ、最後の1をクリック無効にします。

出典

2017-09-20 14:54:25

"もっとやる少ない書く" あなたは次の操作を行うことができます：

$('.activities').on('click','input[type=checkbox]',function(){ 
 
    $(this).siblings('.'+this.className).prop('disabled',this.checked); 
 
    // calculate total amount after each change: 
 
    $('#total').val($.makeArray($('input:checked').map(function(o){ 
 
    return parseFloat(this.nextSibling.textContent.replace(/^.*\$/,'').trim()); 
 
    })).reduce(function(sum,val){return sum+val},0)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset class="activities"> 
 
    <legend>Register for Activities</legend> 
 
    <input type="checkbox" name="all" class="main" />Main Conference — $200 
 
    <input type="checkbox" name="js-frameworks" class="tues_morn" /> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100 
 
    <input type="checkbox" name="js-libs" class="tues_aft" /> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100 
 
    <input type="checkbox" name="express" class="tues_morn" /> Express Workshop — Tuesday 9am-12pm, $100 
 
    <input type="checkbox" name="node" class="tues_aft" /> Node.js Workshop — Tuesday 1pm-4pm, $100   
 
    <input type="checkbox" name="build-tools" class="wed_morn" /> Build tools Workshop — Wednesday 9am-12pm, $100 
 
    <input type="checkbox" name="npm" class="wed_aft" /> npm Workshop — Wednesday 1pm-4pm, $100 
 
</fieldset> 
 
total amount: <input type="text" id="total" />

を私は<label>タグを削除しました彼らは何の目的も果たしていないようだからです。これにより、siblings()関数を使用して、同じclassNamesを持つ他のすべての兄弟を識別することがずっと簡単になりました。だから、全体の動作は、基本的に1行に

$(this).siblings('.'+this.className).prop('disabled',this.checked)

を起こり、私は以来、アラートを削除 - 私の意見では - それは、アクションの流れを妨げます。しかし、再び...

編集でそれを仕事に戻ってお気軽に：
私は、加算機能を追加しました。私は各コースの料金を得るために各チェックボックスの後に与えられたテキスト情報を使用しました。

出典

2017-09-20 15:22:45 cars10m

私もこのバージョンが好きです - 非常にシンプルでポイントに。ありがとうございました –

jQueryでチェックボックスを無効にする

答えて

関連する問題